电梯小姐,花边框,狂风暴雨txt下载
大家好，最近做的项目要用到拖拽排序，我现在的项目是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="element.text" class = "drag-item">
{{element.text}}
</div>
</transition-group>
</draggable>
下面贴一下详细用法
<template>
<draggable v-model="colors" @update="datadragend" :options = "{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);
}
},
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选项，这个选项怎么来的呢，据我观察这个插件是基于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', 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;
}
});
好了，今天的介绍就到这里啦，快去试试吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论