vue拖拽排序插件vuedraggable使用方法詳解

npm install vuedraggable -S

import draggable from 'vuedraggable'

components: {
 draggable
},

<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
 <transition-group>
 <div v-for="element in colors" :key="element.text" class = "drag-item">
 {{element.text}}
 </div>
 </transition-group>
 </draggable>

<template>
 <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
 <transition-group>
 <div v-for="element in colors" :key="element.text" class = "drag-item">
 {{element.text}}
 </div>
 </transition-group>
 </draggable>
</template>

<script>
 import draggable from 'vuedraggable'
 export default{
 data(){
 return{
 msg:"這是測試組件",
 colors: [
 {
 text: "Aquamarine",
 }, 
 {
 text: "Hotpink",
 }, 
 {
 text: "Gold",
 }, 
 {
 text: "Crimson",
 }, 
 {
 text: "Blueviolet",
 },
 {
 text: "Lightblue",
 }, 
 {
 text: "Cornflowerblue",
 }, 
 {
 text: "Skyblue",
 }, 
 {
 text: "Burlywood",
 }
 ],
 startArr:[],
 endArr:[],
 count:0,
 }
 },
 components: {
 　　draggable
 },
 methods:{
 getdata (evt) {
 console.log(evt.draggedContext.element.text)
 },
 datadragEnd (evt) {
 evt.preventDefault();
 console.log('拖動前的索引 :' + evt.oldIndex)
 console.log('拖動后的索引 :' + evt.newIndex)
 console.log(this.colors);
 }
 },
 mounted () {
 //為了防止火狐瀏覽器拖拽的時候以新標簽打開，此代碼真實有效
 document.body.ondrop = function (event) {
 event.preventDefault();
 event.stopPropagation();
 }
 }
 }
</script>

<style lang="scss" scoped>
 .test{
 border:1px solid #ccc;
 }
 .drag-item{
 width: 200px;
 height: 50px;
 line-height: 50px;
 margin: auto;
 position: relative;
 background: #ddd;
 margin-top:20px;
 }
 .ghostClass{
 opacity: 1;
 }
 .bottom{
 width: 200px;
 height: 50px;
 position: relative;
 background: blue;
 top:2px;
 left: 2px;
 transition: all .5s linear;
 }
</style>

var sortable = new Sortable(el, {
 group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
 sort: true, // sorting inside list
 delay: 0, // time in milliseconds to define when the sorting should start
 touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
 disabled: false, // Disables the sortable if set to true.
 store: null, // @see Store
 animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
 handle: ".my-handle", // Drag handle selector within list items
 filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
 preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
 draggable: ".item", // Specifies which items inside the element should be draggable
 ghostClass: "sortable-ghost", // Class name for the drop placeholder
 chosenClass: "sortable-chosen", // Class name for the chosen item
 dragClass: "sortable-drag", // Class name for the dragging item
 dataIdAttr: 'data-id',

 forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

 fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
 fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
 fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

 scroll: true, // or HTMLElement
 scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
 scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
 scrollSpeed: 10, // px

 setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
 dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
 },

 // Element is chosen
 onChoose: function (/**Event*/evt) {
 evt.oldIndex; // element index within parent
 },

 // Element dragging started
 onStart: function (/**Event*/evt) {
 evt.oldIndex; // element index within parent
 },

 // Element dragging ended
 onEnd: function (/**Event*/evt) {
 var itemEl = evt.item; // dragged HTMLElement
 evt.to; // target list
 evt.from; // previous list
 evt.oldIndex; // element's old index within old parent
 evt.newIndex; // element's new index within new parent
 },

 // Element is dropped into the list from another list
 onAdd: function (/**Event*/evt) {
 // same properties as onEnd
 },

 // Changed sorting within list
 onUpdate: function (/**Event*/evt) {
 // same properties as onEnd
 },

 // Called by any change to the list (add / update / remove)
 onSort: function (/**Event*/evt) {
 // same properties as onEnd
 },

 // Element is removed from the list into another list
 onRemove: function (/**Event*/evt) {
 // same properties as onEnd
 },

 // Attempt to drag a filtered element
 onFilter: function (/**Event*/evt) {
 var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
 },

 // Event when you move an item in the list or between lists
 onMove: function (/**Event*/evt, /**Event*/originalEvent) {
 // Example: http://jsbin.com/tuyafe/1/edit?js,output
 evt.dragged; // dragged HTMLElement
 evt.draggedRect; // TextRectangle {left, top, right и bottom}
 evt.related; // HTMLElement on which have guided
 evt.relatedRect; // TextRectangle
 originalEvent.clientY; // mouse position
 // return false; — for cancel
 },

 // Called when creating a clone of element
 onClone: function (/**Event*/evt) {
 var origEl = evt.item;
 var cloneEl = evt.clone;
 }
});