Vue实现拖拽效果

1. 拖拽生成代码

项目中需要实现拖拽自动生成代码的功能，也就类似于一般网站中那种代码生成功能。这一块后端比较好实现，只需要从数据库获取控件绑定的代码块即可，前端则需要实现代码块拖拽的效果。界面大致如下所示：

项目中前端使用的是Vue，所以这里记录一下Vue实现拖拽效果的方法。

2. 可拖拽实现（小方块）

要拖拽控件，首先即需要设定控件可拖拽。设置draggable="true"允许其被拖动。这里貌似只能作用于

控件，button没试过。 所以将需要拖拽的控件用

包裹起来即可。

<div draggable="true" @dragstart="dragstart($event, blockCode)">
</div>

@dragstart绑定拖拽开始时触发的事件，后面再说。

3. 可放下实现（容器）

代码块拖拽后，需要放置在编辑框里，然后让编辑框add一些代码。这就需要设置编辑框允许可放下。通过操作 @dragover 绑定拖拽结束的事情，允许容器放下拖动的小方块。

<div @drop="drop($event)" @dragover="allowDrop($event)">
</div>

allowDrop(ev) {
    ev.preventDefault();
},

全局默认是不允许放置的，ev.preventDefault() 事件是通过阻止原生事件来允许容器被放下拖拽的小方块。

@drop是用来绑定放置小方块后触发的事件。我们这里就是编辑框内添加小方块中绑定的代码块。

4. 参数的传递

（1）静态字符串的传递

拖拽小方块有时需要传递一些消息，这些消息可以通过对象 $event 进行传递。我们可以在 @dragstart 事件中传入消息，然后通过 @drop 事件获取。

dragstart(ev) {
    console.log("开始拖动啦");
    ev.dataTransfer.setData('blockContent', "我是消息本体！");
},

drop(ev) {
    console.log("开始放下啦");
    console.log(ev.dataTransfer.getData('blockContent'));
},

（2）动态参数的传递

上面传送的仅仅是固定的字符串，但像本项目中，需要传送每个小方块绑定的代码块，所以需要在拖拽过程中传递动态的参数。

在 @dragstart 事件中添加一个参数，这个传入的blockCode中绑定了代码块所有的信息：

<div draggable="true" @dragstart="dragstart($event, blockCode)">
</div>

//dragstart含有两个参数，第二个参数就是需要传递的信息
dragstart(ev, item) {
    console.log("开始拖动啦");
    //然后将item中的信息通过setData绑定到事件中
    ev.dataTransfer.setData('blockContent', item.blockContent);
},

@drop 事件不变，仍然是从event对象中获取信息：

drop(ev) {
    console.log("开始放下啦");
    console.log(ev.dataTransfer.getData('blockContent'));
},

所以，上述两种信息的传递其实传递的都是字符串。dataTransfer 中设置的消息（ 即 setData 的第二个参数 ）只能是字符串类型。如果想要传递对象，需要先进行序列化。

参考链接：

前端vue拖拽
Vue 拖拽实现及问题备忘