本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,最小规模=1.0,最大范围=1.0,user-scalable=不”/比;
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;元名称="关键字"内容="/比;
& lt;元名称=懊枋觥蹦谌?"/比;
& lt; style>
.select-item {
background - color: # 5 bc0de;
显示:inline-block;
text-align:中心;
border - radius: 3 px;
margin-right: 10 px;
光标:指针;
填充:6 px 20 px;
颜色:# fff;
}
.cursored {
光标:违约;
}
.project-content。人们满足{
保证金:30 px 50 px;
}
.people-content {
margin-top: 30 px;
}
.drag-div {
边界:1 px固体# 5 bc0de;
填充:10 px;
margin-bottom: 10 px;
宽度:800 px;
光标:指针;
}
.select-project-item {
显示:inline-block;
text-align:中心;
border - radius: 3 px;
}
.drag-people-label {
margin-bottom: 0;
padding-right: 10 px;
}
(v-cloak) {
显示:没有;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=' drag-content ' id=癲ragCon”比;
& lt; div类=跋钅磕谌荨北?
拖& lt; div类='选择'='真的' @dragstart=阻力(事件)的v=皃rojectdatas pjdt”在{{pjdt.name}} & lt;/div>
& lt;/div>
& lt; div类='人们满足的祝辞
& lt; div类=' drag-div ' v=皃eopledata ppdt”@drop=?事件)美元下降”@dragover=癮llowDrop(事件)美元的祝辞
& lt; div类=皊elect-project-item”比;
& lt;标签类=' drag-people-label '在{{ppdt.name}}: & lt;/label>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/vue.min2.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
var dom;
var党卫军=new Vue ({
“el”:“# dragCon”,
数据:{
projectdatas: [{
id: 1、
名称:“葡萄”
}, {
id: 2
名称:“芒果”
}, {
id: 3,
名称:“木瓜”
}, {
id: 4
名称:“榴莲”
}),
peopledata: [{
id: 1、
的名字:“小颖的
}, {
id: 2
名称:“徘徊”
}, {
id: 3,
名称:“空巢青年三”
}, {
id: 3,
名称:“一丢丢的
})
}，
安装:函数(){
美元。nextTick(函数(){
}）
}，
看:{
projectdatas: {
处理程序:函数(val, oldval) {
}，
深:真
}，
peopledata: {
处理程序:函数(val, oldval) {
}，
深:真
}
}，
方法:{
阻力:函数(事件){
dom=event.currentTarget
}，
下降:函数(事件){
事件。防止发生（）：
event.target.appendChild (dom);
}，
allowDrop:函数(事件){
事件。防止发生（）：
}
}
}）;
& lt;/script>
& lt;/body>
& lt;/html>
实现效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
