拖拽Draggable插件
拖拽Draggable插件https://www.npmjs.com/package/vuedraggablehttps://github.com/SortableJS/Sortablehttp
拖拽Draggable插件
https://www.npmjs.com/package/vuedraggable
https://github.com/SortableJS/Sortable
https://github.com/SortableJS/Vue.Draggable
应用示例
http://www.ptbird.cn/vue-draggable-dragging.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
</head>
<style>
.boxa{display: flex;align-items: center;flex-wrap: wrap;}
.cc{cursor: pointer;border: 1px solid #eee;padding:10px;margin:5px 30px;}
</style>
<body>
<div class="" id="app" v-cloak>
<draggable class="boxa" v-bind="dragOptions" v-model="lists">
<div class="cc" v-for="(li,i) in lists" :key="i" @click="del_el(i)">{{li.name}}</div>
</draggable>
</div>
</body>
<script>
var t, vm;
vm = new Vue({
el: '#app',
components: {},
data: function () {
return {
lists:[
{name: "Edgard",id: 3},{name: "Juan 4",id: 4},
{name: "Juan 5",id: 5},{name: "Juan 6",id: 6}
],
};
},
mounted() {},
computed: {
dragOptions() { return {animation: 200}; }
},
methods: {
del_el(i){
this.lists.splice(i, 1);
},
}
})
</script>
</html>
相关文章
发表评论
评论列表
- 这篇文章还没有收到评论，赶紧来抢沙发吧~