JS实现拖拽元素交换位置

源码：js-essays/draggable

基本效果展示：

基本思路：

1. 使元素可以被拖拽（利用 draggable 属性， 注意：链接和图片默认是可拖拽的）
2. 拖拽时，通过被拖拽节点和其他节点的drag事件交互，来切换两个节点的位置（非唯一方法）
3. 添加用户拖拽交互效果

用到的方法：

ondrag 事件在元素或者选取的文本被拖动时触发。

• 在拖动目标上触发(源目标元素):

  • ondragstart - 用户开始拖动元素
  • ondrag - 元素正在被拖动
  • ondragend - 用户结束元素拖动

• 释放目标时触发的事件:

  • ondragenter - 当被拖动的对象进入其容器范围内时触发
  • ondragover - 当被拖动的对象在另一对象容器范围内拖动时触发
  • ondragleave - 当被拖动的对象离开其容器范围内时触发
  • ondrop - 在一个拖动过程中，释放鼠标键时触发

注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。

基本实现（无交互）：

function dragHandler() {
   
  // 用来存取被拖拽的节点
  let draggedNode = null
  // 获取可拖拽节点
  const dragNodes = document.querySelectorAll('div[draggable="true"]')
  // 给可拖拽节点绑定相关事件
  dragNodes.forEach(item => {
   
    item.ondragstart = () => {
   
      draggedNode = item
    }
    // 默认情况下,数据/元素不能在其他元素中被拖放,也就是会阻止你做drop操作，所以取消其默认行为
    item.ondragover