您现在的位置是:首页 > 随笔小记 > 大收获
html5 drag和drop
- 大收获
- 2018-11-01
- 人已阅读
简介拖放(Drag 和 Drop)是很常见的特性。它指的是您抓取某物并拖入不同的位置
拖放是 HTML5 标准的组成部分:任何元素都是可拖放的。
拖放是 HTML5 标准的组成部分:任何元素都是可拖放的。
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
代码解释:
- 调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素中
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:付博瀚
来源:付博瀚个人博客
链接: https://www.fubohan.cn/
下一篇:HTML 本地存储