js拖拽一个元素到另一个元素并获取该元素属性

项目使用VUE框架，直接上代码

html部分：

<!-- 这里为需要拖动的元素 -->
<div class="card"><img @dragstart="start($event)" :src="dianzu" data-id="dianzu" data-name="电阻" alt=""><p>电阻</p></div>
<div class="card"><img @dragstart="start($event)" :src="dianrong" data-id="dianrong" data-name="电容" alt=""><p>电容</p></div>
<div class="card"><img @dragstart="start($event)" :src="diangan" data-id="diangan" data-name="电感" alt=""><p>电感</p></div>

js部分：

start(e) {
    let data={
        id:e.currentTarget.dataset.id,    //获取自定义属性id
        src:e.currentTarget.src
    }
    //设置数据类型为（“Text”）并以json串的数据形式传递
    e.dataTransfer.setData("Text",JSON.stringify(data));     
},

由于所写的功能比较复杂，使用了第三方的插件，可以直接使用jquery，我直接复制的自己代码，可根据不同情况自行理解：

//这里id为box的元素为需要放置的区域
$('#box').on('dragover',function(e){
    e.preventDefault();
})
$('#box').on('drop',function(e){
    e.stopPropagation();   //组织冒泡
    e.preventDefault(); //阻止元素发生默认行为 
    var data =e.originalEvent.dataTransfer.getData("Text");    //获取类型为Text的数据
    data=JSON.parse(data);    //对数据串进行转换即可使用
    //执行其他操作
})