Vueドラッグ・ソートvuedraggableプラグインの実装

公式住所:https://sortablejs.github.io/Vue.Draggable/#/simple
Github:https://github.com/SortableJS/Vue.Draggable
Demo:https://david-desmaisons.github.io/draggable-example/
簡単に使用:https://www.jb51.net/article/151782.htm
https://blog.csdn.net/zhaoxiang66/article/details/81003094
まずvueプロジェクトでnpmパッケージでダウンロード

npm install vuedraggable -S

ダウンロード後、プラグインを導入し、vueファイルのscriptラベルにこのように導入します.

import draggable from 'vuedraggable'

コンポーネントの登録

components: {
    draggable
},

vuedraggable.common.js?bb80:2942 Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind.警告が表示されます:options(オプションアイテムは破棄されました)をv-bindに変更します

    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);//              (  )
                console.log("           ，          :" +             
                this.colors[evt.oldIndex]); 
                console.log("           ，       :"+     
                this.colors[evt.newIndex]);
            }
        },
        mounted () {
	        //                    ，       
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }
        }
    }

optionsの構成は以下の通りです.

group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name          
  sort: true,  //       
  delay: 0, //               。
  touchStartThreshold: 0, // px,           ，         ?
  disabled: false, //       ，   sortable。
  store: null,  // @see Store
  animation: 150,  // ms,            ，' 0 ' -    。
  handle: ".my-handle",  //             。
  filter: ".ignore-elements",  //          (      )
  preventOnFilter: true, //   “event.preventDefault()”   “filter”
  draggable: ".item",  //    item class 
  ghostClass: "sortable-ghost",  //        class       。
  chosenClass: "sortable-chosen",  //          class
  dragClass: "sortable-drag",  //     class。
  dataIdAttr: 'data-id',

  forceFallback: false,  //   HTML5 DnD  ，     。（h5         ，       H5        ）
  fallbackClass: "sortable-fallback",  //   forceFallback    DOM     。
  fallbackOnBody: false,  //     DOM           。（            ）
  fallbackTolerance: 0, //                       。

  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;
  }

その後、transition-group内バインドkey indexが無効になります.

:key="'my-name'+index"