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

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

君子曰:学不可以已。
《计算机科学导论(原书第4版)》

本书是国际知名的高等学校计算机科学及相关专业基础课教材,也是非常受欢迎的计算机入门读物。该教材是一本百科全书式的计算机专业入门指南,涉及计算机科学的方方面面。虽然读者对象是计算机专业的学生,但这本书深入浅出、引人入胜,勾画出了计算机科学体系的框架,可以为有志于IT行业的学生奠定计算机科学知识的基础,架设进一步深入专业理论学习的桥梁。

发表感想

吃土豆的猫    2022-10-05 22:55:02    回复

测试

© 2016 - 2022 chengxuzhixin.com All Rights Reserved.

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