html多列元素可以拖拽

可以通过使用HTML5的拖放API实现多列元素的拖拽功能。首先，需要为每个可拖拽的元素添加一个拖拽事件处理程序，该处理程序将数据传递给拖动操作。然后，在拖动操作开始时，将拖动的数据存储在数据传输对象中。最后，在拖放目标上添加一个拖放事件处理程序，该处理程序在拖放操作完成时处理数据。

以下是一个示例，演示如何实现多列元素的拖拽功能：

HTML代码：

<div class="container">
  <div class="column" id="column1">
    <div class="item" draggable="true" data-id="1">Item 1</div>
    <div class="item" draggable="true" data-id="2">Item 2</div>
    <div class="item" draggable="true" data-id="3">Item 3</div>
  </div>
  <div class="column" id="column2">
    <div class="item" draggable="true" data-id="4">Item 4</div>
    <div class="item" draggable="true" data-id="5">Item 5</div>
    <div class="item" draggable="true" data-id="6">Item 6</div>
  </div>
</div>

CSS代码：

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
  background-color: #f2f2f2;
}

.item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

JavaScript代码：

const items = document.querySelectorAll('.item');

// 添加拖拽事件处理程序
items.forEach(item => {
  item.addEventListener('dragstart', dragStart);
  item.addEventListener('dragend', dragEnd);
});

// 拖拽开始时将数据存储在数据传输对象中
function dragStart() {
  this.classList.add('dragging');
  const dataTransfer = event.dataTransfer;
  dataTransfer.setData('text/plain', this.dataset.id);
}

// 拖拽结束时移除样式
function dragEnd() {
  this.classList.remove('dragging');
}

// 添加拖放事件处理程序
const columns = document.querySelectorAll('.column');

columns.forEach(column => {
  column.addEventListener('dragover', dragOver);
  column.addEventListener('dragenter', dragEnter);
  column.addEventListener('dragleave', dragLeave);
  column.addEventListener('drop', drop);
});

// 拖放目标上的拖拽事件处理程序
function dragOver(event) {
  event.preventDefault();
}

function dragEnter(event) {
  event.preventDefault();
  this.classList.add('hovered');
}

function dragLeave() {
  this.classList.remove('hovered');
}

function drop() {
  const dataTransfer = event.dataTransfer;
  const id = dataTransfer.getData('text/plain');
  const item = document.querySelector(`[data-id="${id}"]`);
  this.appendChild(item);
  this.classList.remove('hovered');
}

在这个示例中，我们首先选择所有可拖拽的元素并为它们添加拖拽事件处理程序。在拖拽开始时，我们将元素的数据id存储在数据传输对象中。在拖拽结束时，我们移除元素上的样式。

接下来，我们选择所有的拖放目标，并为它们添加拖放事件处理程序。在拖放目标上的拖拽事件处理程序中，我们阻止默认行为以允许拖放操作，并添加/移除样式以指示可放置的位置。在放置操作完成时，我们选择拖放的元素并将其移动到目标位置。

请注意，这只是一个简单的示例，可以根据需要进行修改和扩展。