如何用jQuery编写实现网页元素拖动互换位置的功能代码？

本文共计1276个文字，预计阅读时间需要6分钟。

实现步骤+1. 使用HTML+Bootstrap布局画3个面板。+注意：面板样式中的position属性必须是绝对定位或相对定位。+2. 监听面板的mousedown事件。+记录当前响应面板的位置+target_index，设置面板透明。

实现步骤

1.html + bootstrap 布局画3个面板。

注：面板样式 position 属性必须是绝对位置或者相对位置。

2.监听面板的的 mousedown事件。

记录当前对应面板的位置target_index，设置面板透明拖动。

3.监听当前被拖动的面板的mousemove事件。

根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。

4.监听当前被拖动的面板的mouseup事件。

当松开鼠标时，查看当前鼠标所在位置对应的面板的位置exchange_index。对比两个位置，若不一样，说明需要交换这两个位置对应的面板内容，否则直接使被拖动面板回原位即可。