H5 实现拖放 drag and drop

2022-09-11 From 程序之心 By 丁仪

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。把 draggable 属性设置为 true 即可启用拖动,代码为 draggable="true"。

被拖动的元素有如下事件:

  • ondragstart 用户开始拖动元素时触发
  • ondrag 元素正在拖动时触发(整个过程持续触发)
  • ondragend 用户完成元素拖动后触发

推动元素时,在 ondragstart 事件中,记录下被拖动元素的信息。调用 dataTransfer.setData() 方法设置被拖数据的数据类型和值。

function ondragstart(e){
  let data = e.dataTransfer;
  data.setData('text/plain',$(this).attr('id'));
}

拖动元素到目标区域进行放置时,有以下 4 个事件:

  • ondragenter 应用于目标元素,当拖拽元素进入时调用
  • ondragover 应用于目标元素,当停留在目标元素上时调用(持续触发)
  • ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
  • ondragleave 应用于目标元素,当鼠标离开目标元素时调用

浏览器默认会阻止放置元素,需要在 ondragover 中阻止浏览器默认行为才能成功放置。

function ondragover(e){
  e.preventDefault();
}

当放置被拖数据时,在 ondrop 事件中处理放置。

function ondrop(e){
  let data = e.dataTransfer.getData("text/plain");
  e.target.appendChild(document.getElementById(data));
}

本文来源:程序之心,转载请注明出处!

君子曰:学不可以已。
《知识图谱:概念与技术》

知识图谱是一种大规模语义网络,已经成为大数据时代知识工程的代表性进展。知识图谱技术是实现机器认知智能和推动各行业智能化发展的关键基础技术。知识图谱也成为大规模知识工程的代表性实践,其学科日益完善。本书是一本系统介绍知识图谱概念、技术与实践的书籍。

发表感想

© 2016 - 2024 chengxuzhixin.com All Rights Reserved.

浙ICP备2021034854号-1    浙公网安备 33011002016107号