大家好，最近做的项目要用到拖拽排序，我现在的项目是

首先在

npm install vuedraggable -S

下载下来后，引入插件，在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

别忘了下面要注册组件

components: {

draggable

},

然后就可以在template标签里面使用了

下面贴一下详细用法

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();

}

}

}

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

}

下面是结果

上下是可以拖动的，只是截图的话看不出效果来，小伙伴们注意了，里面有个options选项，这个选项怎么来的呢，据我观察这个插件是基于sortable.

vuedraggable: 学习地址

sortable.

options配置如下

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;

}

});

好了，今天的介绍就到这里啦，快去试试吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。