html元素拖动互换位置原理,【详】JS实现拖拽元素互换位置

写在前面的废话

大家好，我是练习js时长接近两年半的个人练习生--李大雷

算了，直接 鸡,你太美~

应用场景

很多时候，我们需要让用户来自定义自己想要的菜单顺序，或者一些按钮的排序，那么这个时候，怎么给用户自定义顺序呢？

拖拽无疑是最简单易懂的，因为玩过手机的都知道怎么拖动桌面的app来改变位置。

那么要怎么做呢？最简单的方式肯定是用H5的拖放啦~

一些你需要了解的基础知识

首先我们先来看看，这两个单词，drag--拖，drop--放，从这里就很容易看出来，这里的操作逻辑了。

我们来看看有哪些事件可以给我们使用。

被我们拖的元素(按住鼠标)

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放拖拽元素时触发的事件(松开鼠标)

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

我们来举例子说明一下

假设有div A和div B，当我按住A，开始拖动(A dragstart触发一次)(drag在你移动的时候不断触发),然后你经过了B(B触发了dragenter事件)，然后你在B里疯狂摩擦(那就疯狂触发B的dragover,这句话怎么越读越不对劲？)，然后你从B中出来(那就触发了B的dragleave)，然后又进入B中(并且放开鼠标，那么就会触发B的drop和A的dragend);

对于A来说，它的事件就前面3个，对于B来说，它的事件就是后面4个;

A是攻，那么B就是受了。当然你也可以自攻自受，就像孟德尔的自交豌豆一样

我们下面做的拖拽也是自攻自受的情况，因为你可能拖动A和B交换，也可能拖动B来和A交换位置。

一些需要注意的点：

如果只需要拖动外层div，请务必把子元素的draggable属性设置为false(如果子元素里面有默认可拖动元素，则需要把里面的可拖动元素的属性设置为false)；不然会引起很多奇怪的现象(比如你想拖一个包含图片的div，结果只把图片拖出来了)；

链接和图片是默认可以拖动的；

ondragenter和ondragleave可能会触发多次，如果你把A拖动到B里，B一个大div设置了enter和leave事件，但是它里面还有很多子div，那么每进出一个子div，都会触发一次enter和leave事件。

开始操刀

这个标题的cao是第一声。

经过我们上面的一顿基础知识学习以后呢，我们就很容易想清楚这个实现逻辑。

把A设置为可以拖动，当A拖动到B的时候，我们就互换A和B两个dom节点。

至于怎么互换呢？我们可以直接调换两个节点的内容，或者我们调换两个dom节点的位置两种方法，这里我用的是第一种方法，第二种留给大家去尝试啦~

1. 我们先写一个大概的样式