10 分鐘上手 Vue 組件 Vue-Draggable

Vue 綜合了 Angualr 和 React 的優勢，因其易上手，輕量級，受到了普遍應用。成爲了是時下火熱的前端框架，吸引着愈來愈多的前端開發者！css

本文將經過一個最簡單的拖拽例子帶領你們快速上手 Vue 組件 Vue-Draggable。html

首先，須要在工做環境中配置好 Vue-cli，建立一個 vue 項目。前端

vue create test_1

建立項目時會有不少安裝步驟，按下面的說明選擇配置：vue

1.pick a preset 選擇 Manually select featureshtml5

2.Check the features needed for your project 選擇 Babel 和 CSS Pre-processors 兩項（使用空格鍵來選中或取消）node

3.Pick a CSS pre-processor 選擇 Sass/SCSS(with node-sass)npm

4.Where do you prefer placing config 選擇 In dedicated config files數組

5.Save this as a preset for future projects？選 yes ，並填寫一個名字，之後的 Vue 項目就能夠繼續使用這個配置瀏覽器

6. Pick the package manager to use when installing dependencies 選擇 Use NPM（有些同窗安裝可能不會遇到這步）sass

OK，準備工做作好，下面咱們能夠進入 Vue-Draggable 的內容。

首先， cd test_1 進入項目目錄，配置一下 Vue-Draggable。

npm i vuedraggable -S

接着,在 src/components 目錄下新建 Draggable.vue。

在 <script> 中引入而且註冊 vuedraggable 組件,再寫一點數據後面驗證用：

<script>
import Draggable from "vuedraggable"

const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
]

export default {
  components: {
    Draggable
  },
  data () {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1 };
      })
    }
  }
}
</script>

而後咱們就能夠在 <template> 中愉快的使用 draggable。

<template>
      <draggable
        class="list-group"
        tag="ul"
        v-model="list"
        v-bind="{
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost'
        }"
      >
          <li
            class="list-group-item"
            v-for="element in list"
            :key="element.order"
          >
            {{ element.name }}
          </li>
      </draggable>
</template>

注意，draggable 標籤中，tag = 'ul' 用來指定 draggable 組件渲染出來的 html 標籤。v-model 綁定列表可拖動的元素，也就是 data() 中的 list，一般與 draggable 中的內部元素 v-for 的引用一致。

v-bind 綁定 draggable 組件的配置項，能夠看看具體講解：

group：string or object
string：命名，用處是爲了設置能夠拖放容器時使用
object: {name, pull, put}
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 來判斷是否放入
animation: number 單位：ms，定義動畫的時間；
disabled: boolean 定義此 sortable 對象是否可用，爲 true 時 sortable 對象不能拖放排序等功能，爲 false 時爲能夠進行排序，至關於一個開關；
ghostClass：selector 格式爲簡單 css 選擇器的字符串，當拖動列表元素時會生成一個副本做爲影子元素來模擬被拖動元素排序的狀況，此配置項就是來給這個影子元素添加一個 class，咱們能夠經過這種方式來給影子元素進行編輯樣式；
sort: boolean 定義是否列表元素是否能夠在列表容器內進行拖拽排序；
delay: number 定義鼠標選中列表元素能夠開始拖動的延遲時間；
handle: selector 格式爲簡單 css 選擇器的字符串，使列表元素中符合選擇器的元素成爲拖動的手柄，只有按住拖動手柄才能使列表元素進行拖動；
filter: selector 格式爲簡單 css 選擇器的字符串，定義哪些列表元素不能進行拖放，可設置爲多個選擇器，中間用「,」分隔
draggable：selector 格式爲簡單 css 選擇器的字符串，定義哪些列表元素能夠進行拖放
chosenClass：selector 格式爲簡單 css 選擇器的字符串，當選中列表元素時會給該元素增長一個 class；
forceFallback：boolean 若是設置爲 true 時，將不使用原生的 html5 的拖放，能夠修改一些拖放中元素的樣式等；
fallbackClass：string 當 forceFallback 設置爲 true 時，拖放過程當中鼠標附着元素的樣式；
scroll：boolean 默認爲 true，當排序的容器是個可滾動的區域，拖放能夠引發區域滾動。

再配置一下對應 class 樣式：

<style lang="scss">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
  list-style: none;
}
.list-group-item {
  cursor: move;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
}

</style>

最後，修改一下 App.vue 註冊組件:

<template>
  <div id="app">
    <draggable></draggable>
  </div>
</template>

<script>
import Draggable from './components/Draggable'

export default {
  name: 'app',
  components: {
    Draggable
  }
}
</script>

啓動項目，在瀏覽器中查看一下效果！

npm run server

很簡單對吧，10 分鐘快速食用完畢！