当元素在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>

以上就是当元素在HTML中被拖动时,执行一个脚本吗?的详细内容,更多请关注双恒网络其它相关文章!

简简单单挺好的

联系我们 订单查询