官方地址：https://sortablejs.github.io/Vue.Draggable/#/simple
Github：/SortableJS/Vue.Draggable
Demo：https://david-desmaisons.github.io/draggable-example/
简单使用：/article/151782.htm
/zhaoxiang66/article/details/81003094
首先在vue项目中，用npm包下载下来
npm install vuedraggable -S
下载下来后，引入插件，在你的vue文件的script标签里面这样引入
import draggable from 'vuedraggable'
注册组件
components: {draggable},
mon.js?bb80:2942 Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind. 出现警告 :options (选项道具已经弃用) 改成 v-bind
<template><draggable v-model="colors" @update="datadragEnd" v-bind = "{draggable:'.drag-item',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);//拖拽排序后会改变原先数据索引(排序)console.log("获取拖拽改变数据索引后，拖动前的索引的元素 :" + this.colors[evt.oldIndex]); console.log("获取拖拽改变数据索引后，被拖拽的元素 :"+this.colors[evt.newIndex]);}},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>
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 Storeanimation: 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", // 设置被选中的元素的classdragClass: "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 HTMLElementscrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrollingscrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.scrollSpeed: 10, // pxsetData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent},// Element is chosenonChoose: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// Element dragging startedonStart: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// Element dragging endedonEnd: function (/**Event*/evt) {var itemEl = evt.item; // dragged HTMLElementevt.to; // target listevt.from; // previous listevt.oldIndex; // element's old index within old parentevt.newIndex; // element's new index within new parent},// Element is dropped into the list from another listonAdd: function (/**Event*/evt) {// same properties as onEnd},// Changed sorting within listonUpdate: 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 listonRemove: function (/**Event*/evt) {// same properties as onEnd},// Attempt to drag a filtered elementonFilter: function (/**Event*/evt) {var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.},// Event when you move an item in the list or between listsonMove: function (/**Event*/evt, /**Event*/originalEvent) {// Example: /tuyafe/1/edit?js,outputevt.dragged; // dragged HTMLElementevt.draggedRect; // TextRectangle {left, top, right и bottom}evt.related; // HTMLElement on which have guidedevt.relatedRect; // TextRectangleoriginalEvent.clientY; // mouse position// return false; — for cancel},// Called when creating a clone of elementonClone: function (/**Event*/evt) {var origEl = evt.item;var cloneEl = evt.clone;}
然后会出现这个问题transition-group 内绑定key index无效
:key="'my-name'+index" 就可以了
