如何在HTML中拖放元素时执行脚本？

当文本选择或可拖动元素被拖放到授权的放置目标时，将触发ondrop事件。通过使用拖放的概念，可以更轻松地将对象移动到不同的区域。

以下是一些例子……

示例

在下面的示例中，我们使用在`

`中拖放可拖动元素时执行Javascript。

<!DOCTYPE HTML>
<html>
<head>
<style>
   .droptarget {
       float: left;
       width: 100px;
       height: 35px;
       margin: 15px;
       padding: 10px;
       border: 1px solid #aaaaaa;
   }
</style>
</head>
<body>
   <div class="droptarget" ondrop="drop(event)"
      ondragover="allowDrop(event)">
      <p ondragstart="dragStart(event)" draggable="true"
      id="dragtarget">DRAG ME..!</p>
   </div>
   <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <p id="tutorial"></p>
   <script>
      function dragStart(event) {
         event.dataTransfer.setData("Text", event.target.id);
         document.getElementById("tutorial").innerHTML = "Started to drag";
      }
      function allowDrop(event) {
         event.preventDefault();
      }
      function drop(event) {
         event.preventDefault();
         var data = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(data));
         document.getElementById("tutorial").innerHTML = "The object was dropped";
      }
   </script>
</body>
</html>

输出

执行上述脚本后，网页将显示一个包含文本“拖动我”的矩形框。当您开始拖动文本时，它会显示文本“开始拖动”。

当文本被拖放到下一个矩形中时，drop事件被触发，并显示文本“对象已放下”。

示例

另一个例子可以写成：

<!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>

输出

执行上述脚本后，网页将显示一个包含文本“拖动我”的矩形框。当您开始拖动文本时，它会显示文本“将左侧框拖动到右侧，或将右侧框拖动到左侧”。

当文本开始被拖动时，drop事件被触发，并显示文本“元素已成功放下”。

当文本被拖放到下一个矩形中时，drop事件被触发，并显示文本“已成功拖动！”。

更新于：2022年9月6日

258 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告