标签：disabled name color Demo list2 --- vuedraggable background id
<!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;
width: 100px;
margin: 10px auto;
padding: 20px;
position: relative;
}
.li2 {
background-color: pink;
}
.right {
width: 200px;
/* 保证list2没有内容时仍然可拖拽左边模块内容 */
min-height: 500px;
background-color: #eee;
}
.delbtn {
width: 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直接查看效果
效果演示
标签：disabled,name,color,Demo,list2,---,vuedraggable,background,id 来源： https://www.cnblogs.com/wwj007/p/16328098.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。