主页 / 问题 / 1415366
Accepted
Ivan ZHILENKO
Asked:2022-07-31 02:48:25 +0000 UTC2022-07-31 02:48:25 +0000 UTC

拖放如何实现多个元素的拖放

  • 772

有一个元素数组，但是 drop 只接受一个元素，我不知道如何为几个元素正确实现它

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

for(const placeholder of placeholders){
    placeholder.addEventListener('dragover', dragover);
    placeholder.addEventListener('dragenter', dragenter);
    placeholder.addEventListener('dragleave', dragleave);
    placeholder.addEventListener('drop', dragdrop);
}
for (const item of items) {
    item.addEventListener('dragstart', dragstart);
    item.addEventListener('dragend', dragend);
}


function dragstart(event) {
    event.target.classList.add('hold');
    setTimeout(() => event.target.classList.add('hide'), 0)
    
}

function dragend(event) {
    event.target.classList.remove('hold', 'hide');

}
function dragover(event) {
    event.preventDefault();
}
function dragenter(event) {
    event.target.classList.add('hovered');
    
}
function dragleave(event) {
    event.target.classList.remove('hovered');
    
}
function dragdrop(event) {
    event.target.classList.remove('hovered');
    event.target.append(item);
}

javascript drag-n-drop

1 个回答

  1. Best Answer

    您只需要向元素添加一个属性draggable并记住应该落入容器中的那个：

    const items = document.querySelectorAll('.item');
const placeholders = document.querySelectorAll('.placeholder');
let dragged = null;

for (const placeholder of placeholders) {
  placeholder.addEventListener('dragover', dragover);
  placeholder.addEventListener('dragenter', dragenter);
  placeholder.addEventListener('dragleave', dragleave);
  placeholder.addEventListener('drop', dragdrop);
}

for (const item of items) {
  item.addEventListener('dragstart', dragstart);
  item.addEventListener('dragend', dragend);
}

function dragstart(event) {
  event.target.classList.add('hold');
  dragged = event.currentTarget;
}

function dragend(event) {
  event.target.classList.remove('hold', 'hide');
}

function dragover(event) {
  event.preventDefault();
}

function dragenter(event) {
  event.preventDefault();
  event.target.classList.add('hovered');
}

function dragleave(event) {
  event.target.classList.remove('hovered');
}

function dragdrop(event) {
  event.target.classList.remove('hovered');
  event.currentTarget.append(dragged);
}
    .item,
.placeholder {
  box-sizing: border-box;
  max-width: 250px;
  min-height: 40px;
  margin: 5px;
}

.placeholder {
  display: flex;
  border: 2px solid green;
}

.item {
  border: 3px solid red;
  width: 40px;
}

.hold { background: orange; }
.hovered { background: yellow; }
    <div class="placeholder">
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
</div>
<div class="placeholder"></div>
<div class="placeholder"></div>

    • 1

相关问题