PHP前端开发

当一个元素被拖拽到一个有效的放置目标时，执行一个脚本在HTML中

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

文章标签脚本

当元素在HTML中被拖动到有效的放置目标时，ondragenter 属性会触发。

示例

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

<!DOCTYPE HTML><html>   <head>      <style type = "text/css">         #boxA, #boxB {            float:left;padding:10px;margin:10px; -moz-user-select:none;         }         #boxA { background-color: #6633FF; width:75px; height:75px; }         #boxB { background-color: #FF6699; width:150px; height:150px; }      </style>      <script type = "text/javascript">         function dragStart(ev) {            ev.dataTransfer.effectAllowed = &#39;move&#39;;            ev.dataTransfer.setData("Text", ev.target.getAttribute(&#39;id&#39;));            ev.dataTransfer.setDragImage(ev.target,0,0);            return true;         }      </script>   </head>   <body>      <center>         <h2>Drag and drop HTML5 demo</h2>         <div>Try to drag the purple box around.</div>         <div id = "boxA" draggable = "true"            ondragstart = "return dragStart(ev)">            <p>Drag Me</p>         </div>         <div id = "boxB">Dustbin</div>      </center>   </body></html>

文章推荐

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

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

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