怎么在vue2.0中使用Sortable.js实现一个拖拽功能
怎么在vue2.0中使用Sortable.js实现一个拖拽功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
站在用户的角度思考问题，与客户深入沟通，找到屏南网站设计与屏南网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网络空间、企业邮箱。业务覆盖屏南地区。
html主要代码
{{element.id}}
{{element.it.name}}
css代码
body{
font-family:'微软雅黑'
}
[v-cloak]{
display:none;
}
#example{
width:1000px;
margin:0 auto;
}
.list-complete-item {
transition: all 1s;
height:50px;
line-height: 50px;
background: #000;
color:#fff;
text-align: center;
font-size:24px;
margin-top:10px;
}
.styleclass{
width:100px;
float:left;
}
.list-complete-enter, .list-complete-leave-active {
opacity: 0;
height: 0px;
margin-top: 0px;
padding: 0px;
border: solid 0px;
}
.list-complete-sortable-chosen,.list-complete-sortable-ghost{
opacity: 0;
height: 0px;
margin-top: 0px;
padding: 0px;
border: solid 0px;
}
.dargDiv{
cursor:move;
background:red;
}
.wrods{
margin-top:50px;
}
p{
line-height:24px;
text-align:center;
}js代码
require.config({
urlArgs: "ver=1.0_0",
paths:{
"vue":'vue.min2',
"sortablejs":'Sortable',
"vuedraggable":'vuedraggable'
},
shim:{
'vue':{
exports:'vue'
}
}
}),
require(['vue','vuedraggable'],function(Vue,draggable){
Vue.component('draggable', draggable);
new Vue({
el: '#example',
data: {
list2:[
{id:"id1",it:{name:'bbbb'}},
{id:"id2",it:{name:'2222'}},
{id:"id3",it:{name:'3333'}},
{id:"id4",it:{name:'4444'}}
]
},
methods:{
getdata: function(evt){
console.log(evt.draggedContext.element.id);
},
datadragEnd:function(evt){
console.log('拖动前的索引：'+evt.oldIndex);
console.log('拖动后的索引：'+evt.newIndex);
}
}
})
})关于怎么在vue2.0中使用Sortable.js实现一个拖拽功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
分享标题：怎么在vue2.0中使用Sortable.js实现一个拖拽功能
链接地址：http://jkwzsj.com/article/pcdgih.html
