下面是基于JavaScript实现拖放功能的攻略：

一、前置知识

HTML基础知识
CSS基础知识
JavaScript基础知识

二、实现拖放

首先，在HTML中创建一个元素，作为可拖动的源元素。例如：

<div id="drag-elem" draggable="true">这是一个可拖动的元素</div>

在JS中获取该元素，添加dragstart事件，该事件在拖动开始时触发，将拖动的元素的id设置为数据传输的数据：

const dragElem = document.getElementById('drag-elem');

dragElem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
});

创建一个可放置目标元素，例如：

<div id="drop-target">这是一个可放置元素</div>

在JS中获取目标元素，添加dragover事件，该事件在拖动元素经过目标元素时触发，防止默认事件并返回false：

const dropTarget = document.getElementById('drop-target');

dropTarget.addEventListener('dragover', function(event) {
  event.preventDefault();
  return false;
});

在JS中获取目标元素，添加drop事件，该事件在拖动元素放置在目标元素上时触发，获取数据并将拖动元素放置在目标元素中：

dropTarget.addEventListener('drop', function(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  const dragElem = document.getElementById(data);
  this.appendChild(dragElem);
});

三、示例说明

示例一

在这个示例中，我们将创建一个简单的HTML页面，在其中添加两个元素，一个作为可拖动的源元素，一个作为可放置的目标元素。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>拖放示例</title>
  <style>
    #drag-elem {
      width: 100px;
      height: 100px;
      background: red;
      color: white;
      text-align: center;
      line-height: 100px;
    }

    #drop-target {
      width: 200px;
      height: 200px;
      background: blue;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="drag-elem" draggable="true">拖我</div>
  <div id="drop-target">放置我</div>

  <script>
    const dragElem = document.getElementById('drag-elem');
    const dropTarget = document.getElementById('drop-target');

    dragElem.addEventListener('dragstart', function(event) {
      event.dataTransfer.setData('text/plain', event.target.id);
    });

    dropTarget.addEventListener('dragover', function(event) {
      event.preventDefault();
      return false;
    });

    dropTarget.addEventListener('drop', function(event) {
      event.preventDefault();
      const data = event.dataTransfer.getData('text/plain');
      const dragElem = document.getElementById(data);
      this.appendChild(dragElem);
    });
  </script>
</body>
</html>

在浏览器中打开该示例，你可以拖动红色的元素，并将其放置在蓝色的元素中。

示例二

在这个示例中，我们将创建一个简单的任务列表，你可以拖动任务项并将其放置在不同的位置上。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>任务列表</title>
  <style>
    .task-item {
      border: 1px solid gray;
      margin: 10px;
      padding: 10px;
      background: white;
    }

    .task-item:hover {
      background: lightgray;
      cursor: grab;
    }

    .task-item.dragging {
      opacity: 0.5;
    }

    .task-item.dragover {
      border: 2px dashed black;
    }

    .task-list {
      display: flex;
      flex-direction: column;
    }

    .task-list-container {
      display: flex;
      justify-content: space-around;
    }
  </style>
</head>
<body>
  <div class="task-list-container">
    <ul class="task-list" id="todo-list">
      <li class="task-item" draggable="true">任务1</li>
      <li class="task-item" draggable="true">任务2</li>
      <li class="task-item" draggable="true">任务3</li>
    </ul>
    <ul class="task-list" id="done-list">
      <li class="task-item" draggable="true">已完成的任务1</li>
      <li class="task-item" draggable="true">已完成的任务2</li>
    </ul>
  </div>

  <script>
    const taskItems = document.querySelectorAll('.task-item');
    const taskLists = document.querySelectorAll('.task-list');

    let draggingTaskItem;

    taskItems.forEach((taskItem) => {
      taskItem.addEventListener('dragstart', function(event) {
        draggingTaskItem = this;
        setTimeout(() => this.classList.add('dragging'), 0);
      });

      taskItem.addEventListener('dragend', function(event) {
        draggingTaskItem = null;
        this.classList.remove('dragging');
      });
    });

    taskLists.forEach((taskList) => {
      taskList.addEventListener('dragover', function(event) {
        event.preventDefault();
        const taskItem = document.querySelector('.dragging');
        taskList.appendChild(taskItem);
      });
    });
  </script>
</body>
</html>

在浏览器中打开该示例，你可以拖动任务项并将其放置在不同的位置上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JavaScript 实现拖放功能 - Python技术站

基于JavaScript 实现拖放功能

一、前置知识

二、实现拖放

三、示例说明

示例一

示例二

相关文章