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));
}

本文来源：程序之心，转载请注明出处！

君子曰：学不可以已。

《黑匣子思维》

“黑匣子思维”是一种记录和审视失败并从中吸取经验的积极态度。不惧怕面对失败，反而视失败为学习的途径。不会否认过失、推诿责任和想方设法脱身，而会把失败作为样本深入研究。缺乏从失败中学习的态度、勇气和能力，会对个体或行业带来严重危害。千方百计避免犯错并不是我们的目标，学习如何聪明而有意义地犯错，将每一次失败作为测试我们成绩的机会。

发表感想

扫码订阅程序之心