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

前端开发作者： 2024-08-20 20:10:01

实现效果：

<!DOCTYPE html>
<htmlheadmeta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
charset="utf-8"title></="keywords"="" ="description"/>

style>
.select-item {
  background-color: #5bc0de;
  display inline-block
  text-align center
  border-radius 3px
  margin-right 10px
  cursorpointer
  padding 6px 20px
  color #fff;
}
 .cursored default
.project-content,.people-content 
    margin 30px 50px
.people-content 
    margin-top 30px
.drag-div 
    border 1px solid #5bc0de
    padding10px
    margin-bottom
    width 800px
    cursor pointer
.select-project-item 
    display
    text-align
    border-radius
.drag-people-label
  margin-bottom0
  padding-right
[v-cloak]none}
</body>

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

        },mounted:function(){
            this.$nextTick((){
                
            })
        },watch:{
            projectdatas:{
                handler:(val,oldval){

                },deep:true
            },peopledata:{
                handler:
            }
        },methods: {
            drag:(event){
               dom = event.currentTarget
            },drop:(event){
              event.preventDefault();
              event.target.appendChild(dom);
            },allowDrop:(event){
              event.preventDefault();
            }
          }

    });


>