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

最新推荐文章于 2024-07-30 18:06:56 发布

XU丶WEI

最新推荐文章于 2024-07-30 18:06:56 发布

阅读量313

点赞数

分类专栏： vue2.0

vue2.0 专栏收录该内容

138 篇文章 0 订阅

订阅专栏

[javascript] view plain copy

print ?

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

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

[javascript] view plain copy

print ?

<!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>  </li><li class="">  </div>  </li><li class="alt">  <div class='people-content'>  </li><li class="">    <div class='drag-div' v-for="ppdt in peopledata" @drop='drop($ event)’ @dragover=‘allowDrop( $event)'>  </li><li class="alt">      <div class='select-project-item'>  </li><li class="">        <label class='drag-people-label'>{{ppdt.name}}:</label>  </li><li class="alt">      </div>  </li><li class="">    </div>  </li><li class="alt">  </div>  </li><li class=""></div>  </li><li class="alt"><script type="text/javascript" src="js/vue.min2.js"></script>  </li><li class=""><script type="text/javascript">  </li><li class="alt">    var dom;  </li><li class="">    var ss = new Vue({  </li><li class="alt">        'el':'#dragCon',  </li><li class="">        data:{  </li><li class="alt">            projectdatas:[{  </li><li class="">                id:1,  </li><li class="alt">                name:'葡萄'  </li><li class="">              },{  </li><li class="alt">                id:2,  </li><li class="">                name:'芒果'  </li><li class="alt">              },{  </li><li class="">                id:3,  </li><li class="alt">                name:'木瓜'  </li><li class="">              },{  </li><li class="alt">                id:4,  </li><li class="">                name:'榴莲'  </li><li class="alt">              }],  </li><li class="">  </li><li class="alt">  </li><li class="">               peopledata:[{  </li><li class="alt">                id:1,  </li><li class="">                name:'小颖'  </li><li class="alt">              },{  </li><li class="">                id:2,  </li><li class="alt">                name:'hover'  </li><li class="">              },{  </li><li class="alt">                id:3,  </li><li class="">                name:'空巢青年三 '  </li><li class="alt">              },{  </li><li class="">                id:3,  </li><li class="alt">                name:'一丢丢'  </li><li class="">              }]  </li><li class="alt">  </li><li class="">        },  </li><li class="alt">        mounted:function(){  </li><li class="">            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>

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

实现效果：