拖拽实现思路

  1. 要拖拽的元素，draggable，drag拖拽，源对象
    1. 一张图片，一个DIV，一段文本
  2. 用于接收被拖拽的元素，droppable，drop释放，目标对象
  3. 拖拽的过渡状态，需要增加样式以提升视觉体验

drag触发的事件

拖拽源触发的事件

  1. ondragstart：源对象开始被拖动
  2. ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
  3. ondragend：源对象被拖动结束

drop触发的事件

拖动源对象进入到 上方的目标对象可以触发的事件

接收拖拽元素的相关事件

  • ondragenter
  • ondragover
  • ondragleave
  • ondrop
  1. droppable.addEventListener('dragover', dragOver);
  2. droppable.addEventListener('dragleave', dragLeave);
  3. droppable.addEventListener('dragenter', dragEnter);
  4. droppable.addEventListener('drop', dragDrop);

拖拽相关实现细节

  1. 当draggable元素被拖动时，原来容器中的draggable元素并不会消失，需要手动将其隐藏（class设置为visible）
  2. 如果同步操作，会立马触发dragend事件导致拖动效果消失，解决：
    1. 在setTimeout的回调中异步设置，确保拖动操作开始后再隐藏draggable元素
  1. 在dragEnter和dragOver方法中，需要通过e.preventDefault来取消默认事件，否则：
    1. 接收容器的drop事件将无法触发
    2. MDN DropTarget
  1. 在dragDrop方法中直接使用append方法，会将draggable元素移动至当前容器下面，需要设计 z-index