技術標籤：技術分享vuejs前端

Vue.Draggable是一款基於Sortable.js實現的vue拖拽外掛。支援移動裝置、拖拽和選擇文字、智慧滾動，可以在不同列表間拖拽、不依賴jQuery為基礎、vue 2過渡動畫相容、支援撤銷操作，總之是一款非常優秀的vue拖拽元件

以上是Vue.Draggable的官網介紹。
Vue.Draggable使用起來是非常方便的，下面我來介紹一下它在vue中基本的用法。

1：下載安裝

npm i -S vuedraggable

2：在你需要的頁面中匯入它

// 將它匯入你的頁面中
import vuedraggable from 'vuedraggable'
 

// 它是個元件，所以你需要把它註冊為區域性元件。（當然，你也可以將它註冊為全域性組建供你隨時使用）
components: {
	vuedraggable
}

3：讓我們來使用它

1：這是 vueDraggable 固定的基本結構

<vuedraggable>
    <transition-group>
    	<!-- 這裡面放你需要拖拽的元素 -->
    </transition-group>
</vuedraggable>

2：當然，為了實現它的功能我們需要給它加上屬性和資料。

HTML：

v-model ：拖拽元件必須的屬性，繫結的是要拖拽移動的陣列。

<vuedraggable v-model="arr"  class="draggable">
    <transition-group>
    	<div class="item" v-for="(item, i) in arr" :key="i">{{item}}</div>
    </transition-group>
</vuedraggable>

CSS:

.draggable {
    width: 500px;
 

    margin: auto;
}
.item {
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    background-color: skyblue;
    text-align: center;
    color: #fff;
    cursor: move;
}

JS：

data () {
        return {
            arr: [1, 2, 3, 4, 5, 6, 7]
        }
    }

效果圖如下：

當然了，此時你只能進行簡單的資料拖拽而已，如果想要更加炫酷的效果我們需要加上其他的屬性了。

3：更多的屬性，更炫酷的效果。

我們可以加上 chosen-class 和 animation 來讓動畫過渡更加的絲滑。

chosen-class： 定義被選中拖拽時元素的樣式，需要在樣式後面加上 !important，並且需要開啟force-fallback="true"這個屬性。

animation：拖動時的動畫效果時間，單位毫秒

HTML:

<!-- 在剛才的基礎上我們增加了 chosen-class、force-fallback、animation屬性。-->
<vuedraggable v-model="arr"
              chosen-class="chose"
              force-fallback="true"
              animation="1000"
              class="draggable">
	<transition-group>
		<div class="item"
             v-for="(item, i) in arr"
             :key="i">{{item}}
		</div>
	</transition-group>
</vuedraggable>

CSS:

.chose {
    background-color: pink;
    border: 1px solid #000 !important;
    cursor: move !important;
}

效果如下：

請忽略這個水印。。。。