前端vue拖拽

时间:2023-03-09 09:58:46
前端vue拖拽

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

一、可拖拽

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

二、定义拖拽事件

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

前端vue拖拽

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

前端vue拖拽

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

三、容器的操作

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

前端vue拖拽

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

四、拷贝事件

前端vue拖拽

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

前端vue拖拽

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

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