利用drag和drop实现列表自由拖拽和插入

hss01248 发布于2019-08-21 17:43 / 1190人阅读

摘要：这方面的亏希望大家不要再吃首先我们要在开始移动时事件中创建一个新的，放在列表中，这个时候的只是一个占位符，只有当事件发生时，才能将真正的插入到列表中。

现在项目中需要实现一个自由拖拽插入的功能，类似于下面这样

在网上找了一下发现没有类似的功能，都不是利用drag和drop实现的，而本人强迫症发作，必须用这两个方法实现，现在做出了大概的功能：
首先，拿到这个需求的思路就是利用拖拽，拖拽事件中有三个值得一提的，ondrop，ondragstart，ondragover,这三个事件的意思分别是放置、开始移动、在...上移动，要弄懂这三个事件要在控制台中打印出来，看他们分别有什么属性；在最开始，我因为一直想获取鼠标的位置，而一直使用mousemove事件，后来发现其实上面的三个拖拽事件都是可以获取鼠标位置的。。
这方面的亏希望大家不要再吃！
首先我们要在开始移动时ondragstart事件中创建一个新的div，放在列表中，这个时候的div只是一个占位符，只有当drop事件发生时，才能将真正的div插入到列表中。
在ondragover事件发生时，需要进行一系列计算，得出div应该插入的正确位置，这其中涉及鼠标位置、元素位置、页面滚动距离，需要有一定的耐心，才能得出想要的结果，我属于没有耐心的。。
在ondrop事件发生时，我们需要删除占位符div，插入真正div

现在只是放上最雏形的代码，待项目完善之后我会放出完善代码以及页面效果~

GPU云服务器云服务器自由拖拽自由列表 html5列表拖拽 python列表插入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89924.html

原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

CatalpaFlat 2019-08-02 16:13 评论0 收藏0
原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

fengxiuping 2019-08-23 16:55 评论0 收藏0
原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

cheng10 2019-08-29 18:37 评论0 收藏0