vuedraggable插件怎么在vue中使用

vuedraggable插件怎么在vue中使用？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

首先在vue项目中，用npm包下载下来

npminstallvuedraggable-S

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

importdraggablefrom'vuedraggable'

别忘了下面要注册组件

components:{
draggable
},

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

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

下面贴一下详细用法

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

<script>
importdraggablefrom'vuedraggable'
exportdefault{
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>

<stylelang="scss"scoped>
.test{
border:1pxsolid#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.5slinear;
}
</style>

下面是结果

上下是可以拖动的，只是截图的话看不出效果来，小伙伴们注意了，里面有个options选项，这个选项怎么来的呢，据我观察这个插件是基于sortable.js，所以这个options里面的配置，和sortable.js是一样的，下面我贴两个地址，一个是vuedraggable的GitHub地址，一个是sortable.js的GitHub地址

vuedraggable:学习地址

sortable.js:学习地址

options配置如下

varsortable=newSortable(el,{
group:"name",//or{name:"...",pull:[true,false,clone],put:[true,false,array]}
sort:true,//sortinginsidelist
delay:0,//timeinmillisecondstodefinewhenthesortingshouldstart
touchStartThreshold:0,//px,howmanypixelsthepointshouldmovebeforecancellingadelayeddragevent
disabled:false,//Disablesthesortableifsettotrue.
store:null,//@seeStore
animation:150,//ms,animationspeedmovingitemswhensorting,`0`—withoutanimation
handle:".my-handle",//Draghandleselectorwithinlistitems
filter:".ignore-elements",//Selectorsthatdonotleadtodragging(StringorFunction)
preventOnFilter:true,//Call`event.preventDefault()`whentriggered`filter`
draggable:".item",//Specifieswhichitemsinsidetheelementshouldbedraggable
ghostClass:"sortable-ghost",//Classnameforthedropplaceholder
chosenClass:"sortable-chosen",//Classnameforthechosenitem
dragClass:"sortable-drag",//Classnameforthedraggingitem
dataIdAttr:'data-id',

forceFallback:false,//ignoretheHTML5DnDbehaviourandforcethefallbacktokickin

fallbackClass:"sortable-fallback",//ClassnamefortheclonedDOMElementwhenusingforceFallback
fallbackOnBody:false,//AppendstheclonedDOMElementintotheDocument'sBody
fallbackTolerance:0,//Specifyinpixelshowfarthemouseshouldmovebeforeit'sconsideredasadrag.

scroll:true,//orHTMLElement
scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEl){...},//ifyouhavecustomscrollbarscrollFnmaybeusedforautoscrolling
scrollSensitivity:30,//px,hownearthemousemustbetoanedgetostartscrolling.
scrollSpeed:10,//px

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

//Elementischosen
onChoose:function(/**Event*/evt){
evt.oldIndex;//elementindexwithinparent
},

//Elementdraggingstarted
onStart:function(/**Event*/evt){
evt.oldIndex;//elementindexwithinparent
},

//Elementdraggingended
onEnd:function(/**Event*/evt){
varitemEl=evt.item;//draggedHTMLElement
evt.to;//targetlist
evt.from;//previouslist
evt.oldIndex;//element'soldindexwithinoldparent
evt.newIndex;//element'snewindexwithinnewparent
},

//Elementisdroppedintothelistfromanotherlist
onAdd:function(/**Event*/evt){
//samepropertiesasonEnd
},

//Changedsortingwithinlist
onUpdate:function(/**Event*/evt){
//samepropertiesasonEnd
},

//Calledbyanychangetothelist(add/update/remove)
onSort:function(/**Event*/evt){
//samepropertiesasonEnd
},

//Elementisremovedfromthelistintoanotherlist
onRemove:function(/**Event*/evt){
//samepropertiesasonEnd
},

//Attempttodragafilteredelement
onFilter:function(/**Event*/evt){
varitemEl=evt.item;//HTMLElementreceivingthe`mousedown|tapstart`event.
},

//Eventwhenyoumoveaniteminthelistorbetweenlists
onMove:function(/**Event*/evt,/**Event*/originalEvent){
//Example:http://jsbin.com/tuyafe/1/edit?js,output
evt.dragged;//draggedHTMLElement
evt.draggedRect;//TextRectangle{left,top,rightиbottom}
evt.related;//HTMLElementonwhichhaveguided
evt.relatedRect;//TextRectangle
originalEvent.clientY;//mouseposition
//returnfalse;—forcancel
},

//Calledwhencreatingacloneofelement
onClone:function(/**Event*/evt){
varorigEl=evt.item;
varcloneEl=evt.clone;
}
});

关于vuedraggable插件怎么在vue中使用问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。