使用 HTML5 Drag API 实现列表的嵌套拖拽

需求与背景：

  

元素列表，多选后可以成组，支持最多3层的嵌套组。

现要求可以拖拽元素，实现顺序的交换、组间的移动；移动时，显示位置提示的样式，放进组内与并列的样式不同；支持多选拖拽。

 

技术选择：HTML5 Drag API

使用的事件：

• dragstart      被拖动元素
• dragenter     经过元素
• dragover      经过元素
• dragleave    经过元素
• dragend      被拖动元素

未使用的事件：

• dragexit      ？
• drop            经过元素   

 

实现思路：

每个item绑定以上使用的5个事件，item将自己的信息emit到容器内，由容器统一处理。

元素列表的数据结构是tree，每个item除了自己的属性外，有一个数组类型的elements属性，保存的是子元素列表。

在容器内，实现了一些操作tree的工具方法，例如删除节点、移动节点到某个节点后、移动节点到某个节点下等。

 

实现细节：

1.handleDragStart

记录被拖动的元素信息，修改被拖动的元素样式

handleDragStart: function(element, ref) {
      this.isDragging = true
      if(element === 'multi'){
        this.isMultiDragging = true
        this.dragElement = undefined
        this.dragElementIdList = Array.from(this.selectedItemList)
        for(let id of this.dragElementIdList){
          document.getElementById(id).style.opacity = 0.6
        }
        
      } else {
        this.isMultiDragging = false
        this.dragElement = element
        this.dragElementIdList = []
        
        ref.style.opacity = 0.6
      }
    },

2. handleDragEnter

dragenter & dragover 的处理，元素会根据鼠标位置的细微差别，区分目标位置是在自己后、前或是与1、2、3级父节点并列（逻辑细碎不提），函数根据这些信息记录当前目标位置，并显示位置提示样式。

    handleDragEnter: function(element, targetPosition, ref, that) {
      if(!this.isDragging) return;