H5 实现拖放 drag and drop

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

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

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

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

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

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

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

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

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

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

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

君子曰：学不可以已。

互联网是一个分布式系统，无线通信、云计算或并行计算、多核系统、移动网络也是如此。蚁群、大脑甚至人类社会都可以被建模为分布式系统。本书强调这些分布式系统中共同涉及的主题和技术，特别是强调分布式系统设计中的一些基本问题，涵盖通信、协调、容错性、本地性、并行性、打破对称性、同步化、不确定性等。

发表感想

扫码订阅程序之心