前端vue拖拽

工作上遇到的需求：页面上需要拖拽一个小方块div拷贝至保存的容器中。

一、可拖拽

那么我们需要对小方块div进行授权，设置draggable="true"允许其被拖动

二、定义拖拽事件

由于要对小方块进行拷贝，因此我们可以直接在拖拽开始的事件中对小方块进行拷贝

那么很显然拖拽时发生的操作我们会在drag函数中进行定义：

如：在拖动事件drag中对拖动的小方块进行了拷贝，保存在了dom中。当然有其他需求的可以再进行一些其他的操作。

三、容器的操作

对于容器而言，我们需要对其授权，操作dragover拖拽结束的事情，允许他被放下拖动的小方块。

备注：此事件是通过阻止原生事件来允许容器被放下拖拽的小方块。

四、拷贝事件

为了达到拷贝完成的效果，我们需要在容器的drop事件中定义好拖拽结束之后发生的事件，也就是我们需要在此将拷贝好的dom内容插入到容器中，达到渲染到页面上，完成整个拖拽事件的效果。

备注：在drop事件中，首先要阻止原生父事件，然后我将刚刚拷贝好的this.dom小方块直接通过appendChild插入到了页面的容器中，实现整个页面上拖拽渲染的整个过程。

 

总结：拖拽只需要定义好拖拽者允许拖拽draggable，容器允许被放置，同时定于好开始拖拽dragstart的事件以及拖拽结束dragover的事件，最后定义好放置事件drop即可完成。

转载于:https://www.cnblogs.com/threepigs/p/10557352.html