Html5原生拖拽相关事件简介以及基础实现

  拖拽实现
 
  主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的,也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下,很强。后续有使用到再写篇文章进行分享。
 
  相关事件定义与用法
 
  涉及一个属性六个事件。事件均为H5原生事件。
 
  属性
 
  draggable:正常div是不允许进行拖动的。需要添加属性draggable=”true”将元素设置为可拖动。
 
  事件
 
  ondragstart:拖拽元素事件。在被拖拽时被调用。
 
  ondrag:拖拽元素事件。在元素正在被拖拽时调用。
 
  ondragend:拖拽元素事件。在拖拽元素放置时调用。
 
  ondragenter:放置元素事件。在拖拽元素进入到放置元素有效区域时调用。
 
  ondragover:放置元素事件。在拖拽元素覆盖放置元素有效区域时调用
 
  ondragleave:放置元素事件。在拖拽元素离开放置元素有效区域时调用。
 
  ondrop:放置元素事件。在拖拽元素被放置在放置元素中调用。
 
  基础代码实现
 
  拖拽元素相关事件实现代码如下。
 
  function handleOndragstart() {
 
  }
 
  function handleOndragend() {
 
  }
 
  function handleOndrag() {
 
  }
 
  拖拽元素H5代码如下
 
  该元素为拖拽元素
 
  放置元素相关事件实现代码如下
 
  }
 
  function handleOndragenter(event) {
 
  event.preventDefault();
 
  }
 
  function handleOndragleave(event) {
 
  event.preventDefault();
 
  }
 
  function handleOndrop(event) {
 
  event.preventDefault(); // 清除默认事件。drop 事件的默认行为是以链接形式打开
 
  }
 
  放置元素H5代码如下
 
  该元素为放置元素
 
  实例
 
  以下代码可实现在两个div之间进行子元素的拖拽
 
  拖拽实现

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61681.shtml

张贴在2