<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vuedrag</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
<style>
#app {
display: flex;
justify-content: space-around;
}
.li2,
.li {
background-color: powderblue;
100px;
margin: 10px auto;
padding: 20px;
position: relative;
}
.li2 {
background-color: pink;
}
.right {
200px;
/* 保证list2没有内容时仍然可拖拽左边模块内容 */
min-height: 500px;
background-color: #eee;
}
.delbtn {
24px;
position: absolute;
right: 0;
top: 0;
font-size: 12px;
line-height: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<!-- 左侧菜单区 -->
<draggable v-model="list1" draggable=".li" v-bind="dragOptions"
:options="{sort: false, group: {name: 'field', pull:'clone',put: false}}">
<div v-for="d in list1" :key="d.id" class="li" :class="{'disabled':d.disabled}">{{d.name}}</div>
</draggable>
<!-- 右侧页面生成区 -->
<draggable class="right" group="field" v-bind="dragOptions" :list="list2" @change="toChange">
<div v-for="(d,index) in list2" :key="'r'+index" class="li2">
<span>{{d.name}}</span>
<div class="delbtn" @click="del(index)">删除</div>
</div>
</draggable>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
dragOptions: {
animation: 500,
filter: '.disabled' //class为disabled时不可拖拽
},
list1: [
// 重复拖动相同元素时key重复，需要处理
{ name: "头部", id: 1, disabled: true }, //设置第一项不可拖动
{ name: "标题", id: 2 },
{ name: "图片", id: 3 },
{ name: "分割线", id: 4 }
],
list2: []
},
methods: {
toChange(e) {
console.log(e)
if (e.added) {
console.log(this.list2)
}
},
del(idx) {
this.list2.splice(idx, 1)
}
}
})
</script>
</body>
</html>
复制到空的html直接查看效果
效果演示
