如何在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 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告