HTML5如何实现元素拖拽

2025-02-09 00:48:44
推荐回答(1个)
回答(1):

  1. 在拖放的过程中会触发以下事件:
    在拖动目标上触发事件 (源元素)
      ondragstart - 用户开始拖动元素时触发
      ondrag - 元素正在拖动时触发
      ondragend - 用户完成元素拖动后触发

  2. 释放目标时触发的事件
      ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
      ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
      ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
      ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

     

    event对象(以e代替)

    e.target

      W3Cschool上的解释是:返回触发此事件的元素(事件的目标节点),这个target属性只兼容ie9及以上

    e.preventDefault()

      取消事件的默认动作。

    e.dataTransfer.setData()

      设置被拖数据的数据类型和值。

    e.dataTransfer.getData()

      获得被拖的数据。