如何使用 JavaScript 实现一个简单的拖放功能？

29天前更新

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>

    <p>Drag the W3Schools image into the rectangle:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    <br>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

  </body>
</html>

使用 JavaScript 实现一个简单的拖放功能

拖放（Drag and Drop）是一项网页和应用程序的交互式功能，可以让用户执行拖拽、删除和释放动作。在 JavaScript 中实现它需要一系列的函数、事件监听器以及额外的逻辑。

要实现一个简单的拖放功能，必须在拖放元素上监听多个事件，例如 dragstart 、 dragover 、 drop 和 dragend :

// 设置拖放元素，该元素及其子元素可以拖放
let dragsource = document.querySelector('#dragsource');

// 为元素添加事件监听器
dragsource.addEventListener('dragstart', handleDragStart, false);
dragsource.addEventListener('dragover', handleDragOver, false);
dragsource.addEventListener('drop', handleDrop, false);
dragsource.addEventListener('dragend', handleDragEnd, false);

// dragstart 监听器，设置拖放的数据
function handleDragStart(e) {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', 'someDragData');
}

// dragover 监听器，允许拖放操作
function handleDragOver(e) {
    if (e.preventDefault) e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    return false;
}

// drop 监听器，传递数据并做出反应
function handleDrop(e) {
    // 这里是拿到传进来的数据
    let data = e.dataTransfer.getData("text/plain");
 
    // 拿到数据后在这里你可以对它做出反应

    // 必要时，阻止默认操作（如链接）
    if (e.preventDefault) e.preventDefault();
    return false;
}

// dragend 监听器，拖放结束后做出反应
function handleDragEnd(e) {
    
    // 在这里你可以对拖放结束做出反应
}

评分

欢迎为他评分