本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
<  name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"/>
<  charset=\"utf-8\">
< ></ >
<  name=\"keywords\" content=\"\" />
<  name=\"de ion\" content=\"\" />
 
<style>
.select-item {
 background-color: #5bc0de;
 display: inline-block;
 text-align: center;
 border-radius: 3px;
 margin-right: 10px;
 cursor:pointer;
 padding: 6px 20px;
 color: #fff;
}
 .cursored{
 cursor: default;
}
.project-content,.people-content {
  margin: 30px 50px;
}
.people-content {
  margin-top: 30px;
}
.drag-div {
  border: 1px solid #5bc0de;
  padding:10px;
  margin-bottom: 10px;
  width: 800px;
  cursor: pointer;
}
.select-project-item {
  display: inline-block;
  text-align: center;
  border-radius: 3px;
}
.drag-people-label{
 margin-bottom:0;
 padding-right:10px;
}
[v-cloak]{
  display:none;
}
</style>
</head>
<body>
 
<div class=\'drag-content\' id=\"dragCon\" >
 <div class=\'project-content\'>
  <div class=\'select-item\' draggable=\'true\' @dragstart=\'drag($event)\' v-for=\"pjdt in projectdatas\">{{pjdt.name}}</div>
 </div>
 <div class=\'people-content\'>
  <div class=\'drag-div\' v-for=\"ppdt in peopledata\" @drop=\'drop($event)\' @dragover=\'allowDrop($event)\'>
   <div class=\'select-project-item\'>
    <label class=\'drag-people-label\'>{{ppdt.name}}:</label>
   </div>
  </div>
 </div>
</div>
<  type=\"text/ \" src=\"js/vue.min2.js\"></ >
<  type=\"text/ \">
  var dom;
  var ss = new Vue({
    \'el\':\'#dragCon\',
    data:{
      projectdatas:[{
        id:1,
        name:\'葡萄\'
       },{
        id:2,
        name:\'芒果\'
       },{
        id:3,
        name:\'木瓜\'
       },{
        id:4,
        name:\'榴莲\'
       }],
 
 
        peopledata:[{
        id:1,
        name:\'小颖\'
       },{
        id:2,
        name:\'hover\'
       },{
        id:3,
        name:\'空巢青年三 \'
       },{
        id:3,
        name:\'一丢丢\'
       }]
 
    },
    mounted:function(){
      this.$nextTick(function(){
        
      })
    },
     watch:{
      projectdatas:{
        handler:function(val,oldval){
 
        },
        deep:true
      },
      peopledata:{
        handler:function(val,oldval){
 
        },
        deep:true
      }
    },
 
    methods: {
      drag:function(event){
        dom = event.currentTarget
      },
      drop:function(event){
       event.preventDefault();
       event.target.appendChild(dom);
      },
      allowDrop:function(event){
       event.preventDefault();
      }
     }
 
  });
 
 
</ >
</body>
</html>

实现效果：

\"\"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章