vuejs2.0运用原生js实现简单的拖拽元素功能

最新推荐文章于 2024-03-29 15:52:30 发布

barnett_y

最新推荐文章于 2024-03-29 15:52:30 发布

阅读量4.9k

点赞数

分类专栏：【Vue2.0-3.0点滴知识】

【Vue2.0-3.0点滴知识】专栏收录该内容

571 篇文章 61 订阅

订阅专栏

http://www.cnblogs.com/moqiutao/p/6428632.html

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

实现效果：

barnett_y

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vuejs2.0运用原生js实现简单的拖拽元素功能

http://www.cnblogs.com/moqiutao/p/6428632.html.select-item { background-color: #5bc0de; display: inline-block; text-align: center; border-radius: 3px; margin-right: 10px; curso
复制链接

扫一扫