vuejavascript2.0运用原生javascript如何实现简单拖拽元素功能

挂林风景异,秋似洛阳春。倘若,生命是一场旅行,爱,一定在路上。而往往,走得最急的,都是最美的风景。世界上有不绝的风景,我有不老的心。有时三点两点雨,到处十枝五枝花。

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" 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>
<script type="text/javascript" src="js/vue.min2.js"></script>
<script type="text/javascript">
  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();
      }
     }
 
  });
 
 
</script>
</body>
</html>

实现效果:

本文vuejavascript2.0运用原生javascript如何实现简单拖拽元素功能到此结束。大多数人想要改造这个世界,但却罕有人想改造自我。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明