主页 / 问题 / 976783
Accepted
recile
Asked:2020-05-01 04:40:24 +0000 UTC2020-05-01 04:40:24 +0000 UTC

如何使使用鼠标拖放（交换）div 成为可能？

  • 772

拖放

.drop_list{
  width: 170px;
}

.drop{
  width: 50px;
  height: 50px;
  border:solid;
  float: left;
}
<div class="drop_list">
<div class="drop">1</div>
<div class="drop">2</div>
<div class="drop">3</div>
<div class="drop">4</div>
<div class="drop">5</div>
<div class="drop">6</div>
</div>

javascript

1 个回答

  1. Best Answer

    这是一个实现示例

    document.querySelectorAll('.drop').forEach(e => {
  e.draggable = true;
  e.ondragstart = e => {
    e.dataTransfer.setData("id", e.target.id);
    e.target.classList.add('dragging');
  }
  e.ondragover = e => {
    let old = document.querySelector('.over');
    old && old.classList.remove('over')
    e.target.classList.add('over');
    e.preventDefault();
  };
  e.ondrop = e => {
    let old = document.querySelector('.dragging');
    old && old.classList.remove('dragging')
    old = document.querySelector('.over');
    old && old.classList.remove('over');
    let v = e.target.innerHTML;
    let fromEl = document.querySelector('#'+e.dataTransfer.getData('id'));
    e.target.innerHTML = fromEl.innerHTML;
    fromEl.innerHTML = v;

  };
})
    .drop_list{
  width: 170px;
}

.drop{
  width: 50px;
  height: 50px;
  border:solid;
  float: left;
  transition:100ms;
  text-align:center;
   line-height: 50px;
   font-size:30px
}

.dragging {
  opacity:0.5;
}

.over {
  border: solid red;
}
    <div class="drop_list">
<div id="c1" class="drop">1</div>
<div id="c2" class="drop">2</div>
<div id="c3" class="drop">3</div>
<div id="c4" class="drop">4</div>
<div id="c5" class="drop">5</div>
<div id="c6" class="drop">6</div>
</div>

    • 2

相关问题