在Vue.js中使用 H5的拖拽

1、一些帮助

1、来自w3school的 HTML5 拖放教程;
2、我觉得这篇文章写的很不错，可以参考一起食用：How to Add Drag and Drop to Your VueJS Project；

2、这是我的Vue简单的示例代码：

JS模块：

data(){return{
    //存放的盒子
    boxList:[
        {},{},{},{},{},{},{},
    ],
    //数据列表
    dataList:[
        {id:0,name:"test"},
        {id:2,name:"test"},
        {id:3,name:"test"},
        {id:4,name:"test"},
    ]
}},

methods:{
    //拖拽开始
    start(e){
        // e.preventDefault();
        console.log('拖拽开始');
        e.dataTransfer.dropEffect = 'move'
        e.dataTransfer.effectAllowed = 'move'
        e.dataTransfer.setData('id',e.target.id)
    },
    //目标范围
    dragEnter(){
        // e.preventDefault();
        // console.log('已进入目标范围');
    },
    //拖拽结束
    dropEnd(e){
        e.preventDefault();
        let id = e.dataTransfer.getData('id');
        if(e.target.localName!='span' && !e.target.getElementsByTagName('span').length){
            e.target.appendChild(document.getElementById(id));
        }
    },
    //拖拽结束
    dragend(){
        // console.log('拖拽结束,但你无法从拖拽源获取Id');
    },
    //------
    allowDrop(e){
        e.preventDefault();
    }
},

DOM模块

<template>
<div>

<ul class="box">
    <!-- 接受拖拽的区域 -->
    <li v-for="(item,i) in boxList" :key="i"
        @dragenter="dragEnter"
        @dragover="allowDrop"
        @drop= "dropEnd"
    >
    </li>
</ul>



<ul>
    <li v-for="(item,i) in dataList" :key="i">
        <!-- 发出拖拽的区域，但不接受拖拽 -->
        <!-- 
            如果draggable被你写成了 draggable="true"
            也许会导致目标位置drop事件失效的,
            但我并未尝试过 :draggable="true"
        -->
        <span draggable
            @dragstart="start"
            @dragover="allowDrop"
            @dragend.prevent= "dragend"
            :id="'i'+i"
        >{{item.name}}</span>
    </li>
</ul>

</div>
</template>

SCSS模块：

<style lang="scss" scoped>
$w:80px;
ul{
    text-align: center;
}
li{
    display: inline-block;
    height: $w;
    width: $w;
    border: solid 1px #ccc;
    margin-right: 20px;
    vertical-align: top;
    span{
        line-height: $w;
        text-shadow: 1px 1px 1px #e41919;
    }
}
.box{
    margin-bottom: 100px;
    li{
        background-color: #fff;
    }
}
</style>

---

2020年 八月 24日；初秋