JS实现元素的拖动与占位功能 JS实现元素的拖动与占位功能

这篇博客，是博主这几天刚做的一个项目遇到的一个难点，学会了这个，你就能轻松实现页面元素的移动啦，再配合一些条件，就可以做出一个任务完成进度的页面了！
【JS实现元素的拖动与占位功能】
文章图片

先来看看效果：

文章图片

实现功能：拖动元素从一个板块移动到另一个板块的某个位置，博主根据自己的需求做的这个是点击的元素只能移动到它所在模块的下一个模块，如果移动到别的模块就会回到原来位置，而且当你拖动的元素位置没有超过某个距离也会自动弹回到原来位置
案例分析：关键一步就在于！当你鼠标按下的时候，不仅要获取到当前的元素还要获取到当前所在的模块（所以在一开始就要先给每个模块设置一个index属性，属性值就是每个模块本身的索引号），这一步是为了当鼠标放开的时候进行判断所要移动到的模块是否是当前模块的下一个模块（可能有点绕，仔细读仔细品），如果条件成立，那么就要开始和所要移动到的模块中的元素一一比较位置了（这里是为了确定元素要移动到的具体位置），确定好后就要在具体位置新建一个空的元素，把移动元素的内容添加到这个空的元素中，最后最后一步！不要忘记把原先的那个元素移除噢~
代码呈现：

Document - 锐客网* {margin: 0; left: 0; list-style: none; box-sizing: border-box; }.container {display: flex; justify-content: space-around; width: 1000px; height: 600px; margin: 100px auto; padding: 0; }.container li {width: 180px; height: 100%; background-color: plum; border-radius: 10px; padding: 5px; }.item {width: 170px; height: 100px; background-color: salmon; margin: 5px 0; border-radius: 10px; cursor: pointer; }
123

456

789

扩展：这个案例再结合后台数据，就可以实现多个任务不同进度的显示和拖动效果了，如下图所示：