PHP前端开发

当元素在HTML中被拖动时，执行一个脚本吗？

百变鹏仔 3个月前 (09-21) #HTML

文章标签拖动

使用 HTML 中的 ondragover HTML 属性在 HTML 中拖动元素时执行脚本。

示例

您可以尝试运行以下代码来实现ondragover 属性 -

<!DOCTYPE HTML><html>   <head>      <style>         .drag {            float  : left;            width  : 100px;            height : 35px;            border : 2px dashed #876587;            margin : 15px;            padding: 10px;         }      </style>   </head>   <body>      <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)">         <p ondragstart = "dragStart(event)" ondrag = "draggingNow(event)" draggable = "true" id="dragtarget">Drag!</p>      </div>      <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"></div>      <div id = "box"></div>      <p>Drag the left box to the right or drag the right box to the left.</p>      <script>         function dragStart(event) {            event.dataTransfer.setData("Text", event.target.id);          }         function draggingNow(event) {            document.getElementById("box").innerHTML = "Dragged successfully!";         }         function dropNow(event) {            event.preventDefault();         }         function drop(event) {            event.preventDefault();            var data = event.dataTransfer.getData("Text");            event.target.appendChild(document.getElementById(data));            document.getElementById("box").innerHTML = "The element dropped successfully!";         }      </script>   </body></html>

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客