Web入门：HTML5拖放

abcabc lv.1

发布时间：2022-12-31 03:05:56 291

案例内容

利用ondragstart、ondragover、ondrop属性，并编写相关代码，完成图片的拖放。

演示

学习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小院里的霍大侠</title> <!-- 拖放事件函数 --> <script> function allow(e) { e.preventDefault(); } function drag(e) { e.dataTransfer.setData("Text",e.target.id); } function drop(e) { e.preventDefault(); let data=e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); } </script> </head> <body> <!-- 拖放事件的HTML元素 --> <div> <p>拖动图片放置到框中</p> <p id="drop" ondrop="drop(event)" ondragover="allow(event)"></p> <img id="drag" src="1.png" draggable="true" ondragstart="drag(event)" width="100" height="100"> </div> </body> <!-- CSS样式 --> <style> div { width: 500px; height: 500px; position: absolute; top: 0; right: 0; bottom: 0; left: 300px; margin: auto; } #drop {width:100px;height:100px;padding:10px;border:1px solid #aaaaaa;} </style> </html>

总结思考

学习点： 1、draggable="true" ：元素可拖动 2、ondragstart ：规定当元素被拖动时，会发生什么 3、ondragover ：规定在何处放置被拖动的数据 4、ondrop ：进行放置 5、dataTransfer.setData() ：设置被拖数据的数据类型和值 6、preventDefault() ：阻止浏览器对元素的默认处理方式 7、dataTransfer.getData("Text") ：获得被拖的数据

拖放（Drag 和 drop）是 HTML5 标准的组成部分。可以使用拖放进行验证，识别人机。拖放可以使你的界面不再单调无趣。

关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..

全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。

文章来源： https://blog.51cto.com/huodaxia/5968224

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。