Vue.Draggable學習筆記

options：Object，配置項,就是sortable.js的props

• group：string or object

string：

group="people"

命名，個人建議用元素id就行,用處是為了設定可以拖放容器時使用，在array中的put的設定中再做介紹；

object：{name,pull,put}

:group="{ name: 'people', pull: 'clone', put: false }"

• name：同string的值，
• pull：pull用來定義從這個清單容器移動出去的設定 true / false / ‘clone’ / function

  true

  :清單容器内的清單單元可以被移出；

  false

  ：清單容器内的清單單元不可以被移出；

  'clone'

  ：清單單元移出，移動的為該元素的副本；

  function

  ：用來進行pull的函數判斷，可以進行複雜邏輯，在函數中return false/true來判斷是否移出；
• put：put用來定義

  往

  這個清單容器放置清單單元的設定， true / false / [‘foo’,‘bar’] / function

  true

  :清單容器可以從其他清單容器内放入清單單元；

  false

  ：與true相反；

  ['foo','bar']

  ：這個可以是一個字元串或者是字元串的數組，代表的是group配置項裡定義的name值；

  function

  ：用來進行put的函數判斷，可以進行複雜邏輯，在函數中return false/true來判斷是否放入；
• sort：boolean 定義是否清單單元是否可以在清單容器内進行拖拽排序；
• delay：number 定義滑鼠選中清單單元可以開始拖動的延遲時間；
• disabled：boolean 定義是否此sortable對象是否可用，為true時sortable對象不能拖放排序等功能，為false時為可以進行排序，相當于一個開關；
• animation：number 機關：ms，定義排序動畫的時間；
• handle：selector 格式為簡單css選擇器的字元串，使清單單元中符合選擇器的元素成為拖動的搖桿，隻有按住拖動搖桿才能使清單單元進行拖動；

  :options="{handle:'.handle'}"。

• filter：selector 格式為簡單css選擇器的字元串，定義哪些清單單元不能進行拖放，可設定為多個選擇器，中間用“，”分隔；
• draggable：selector 格式為簡單css選擇器的字元串，定義哪些清單單元可以進行拖放
• ghostClass：selector 格式為簡單css選擇器的字元串，當拖動清單單元時會生成一個副本作為影子單元來模拟被拖動單元排序的情況，此配置項就是來給這個影子單元添加一個class，我們可以通過這種方式來給影子元素進行編輯樣式；

  ghost-class="ghost"

• chosenClass：selector 格式為簡單css選擇器的字元串，當選中清單單元時會給該單元增加一個class；
• forceFallback：boolean 如果設定為true時，将不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等；
• fallbackClass：string 當forceFallback設定為true時，拖放過程中滑鼠附着單元的樣式；
• scroll：boolean 預設為true，當排序的容器是個可滾動的區域，拖放可以引起區域滾動