前端vue拖拽


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

一、可拖拽

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

二、定义拖拽事件

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

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

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

三、容器的操作

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

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

四、拷贝事件

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

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

 

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM