vue拖拽排序插件vuedraggable使⽤⽅法详解
⼤家好，最近做的项⽬要⽤到拖拽排序，我现在的项⽬是vue项⽬，所以我就屁颠屁颠的去百度有⽊有这样功能的插件，我就知道⼀定会有，那就是vuedraggable，这是⼀款很棒的拖拽插件，下⾯我来说⼀下怎么引⼊
⾸先在vue项⽬中，⽤npm包下载下来
npm install vuedraggable -S
下载下来后，引⼊插件，在你的vue⽂件的script标签⾥⾯这样引⼊
import draggable from 'vuedraggable'
别忘了下⾯要注册组件
components: {
draggable
},
然后就可以在template标签⾥⾯使⽤了
<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<div v-for="element in colors" :key="" class = "drag-item">
{{}}
</div>
</transition-group>
</draggable>
下⾯贴⼀下详细⽤法
<template>
<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<div v-for="element in colors" :key="" class = "drag-item">
{{}}
</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.)
},
datadragEnd (evt) {
evt.preventDefault();
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + wIndex)
console.lors);
}
},
mounted () {
//为了防⽌⽕狐浏览器拖拽的时候以新标签打开，此代码真实有效  drop = 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选项，这个选项怎么来的呢，据我观察这个插件是基于sortable.js，所以这个options⾥⾯的配置，和sortable.js是⼀样的，下⾯我贴两个地址，⼀个是vuedraggable 的GitHub地址，⼀个是sortable.js的GitHub地址
vuedraggable:
sortable.js:
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', Content); // `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
<; // target list
evt.from; // previous list
evt.oldIndex; // element's old index within old 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
transition用法搭配},
// 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: jsbin/tuyafe/1/edit?js,output
evt.dragged; // dragged HTMLElement
evt.draggedRect; // TextRectangle {left, top, right и bottom}
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;
}
});
好了，今天的介绍就到这⾥啦，快去试试吧。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。