vuejs2.0运用原生js实现简单拖拽元素功能-创新互联

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

创新互联为企业级客户提高一站式互联网+设计服务，主要包括成都网站制作、成都做网站、app软件定制开发、小程序开发、宣传片制作、LOGO设计等，帮助客户快速提升营销能力和企业形象，创新互联各部门都有经验丰富的经验，可以确保每一个作品的质量和创作周期，同时每年都有很多新员工加入，为我们带来大量新的创意。

<!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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻标题：vuejs2.0运用原生js实现简单拖拽元素功能-创新互联
路径分享：https://www.cdcxhl.com/article0/igdio.html

成都网站建设公司_创新互联，为您提供品牌网站制作、企业建站、用户体验、定制网站、定制开发、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容