使用鼠标拖动盒子，拖动到另一个盒子上方松开时，交换其位置

Dream104

于 2023-11-14 16:18:18 发布

阅读量95

点赞数

分类专栏： # 面试代码题文章标签： css javascript 前端

本文链接：https://blog.csdn.net/Dream104/article/details/134401608

版权

面试代码题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现代码如下：

// draggable="true"：确保盒子可以拖动
<body>
  <div class="container">
    <div id="box1" class="box" draggable="true" ondrop="drop(event,this)" ondragover="  dragOver(event)"
      ondragstart=" dragStart(event, this)">盒子1</div>
    <div id="box2" class="box" draggable="true" ondrop="drop(event,this)" ondragover="  dragOver(event)"
      ondragstart=" dragStart(event, this)">盒子2</div>
    <div id="box3" class="box" draggable="true" ondrop="drop(event,this)" ondragover="  dragOver(event)"
      ondragstart=" dragStart(event, this)">盒子3</div>
    <div id="box4" class="box" draggable="true" ondrop="drop(event,this)" ondragover="  dragOver(event)"
      ondragstart=" dragStart(event, this)">盒子4</div>
    <div id="box5" class="box" draggable="true" ondrop="drop(event,this)" ondragover="  dragOver(event)"
      ondragstart=" dragStart(event, this)">盒子5</div>
    <div id="box6" class="box" draggable="true" ondrop="drop(event,this)" ondragover="  dragOver(event)"
      ondragstart=" dragStart(event, this)">盒子6</div>
  </div>
</body>
// js逻辑
<script type="text/javascript">
  function dragOver(ev) {
    ev.preventDefault();
  }

  var srcdiv = null;
  function dragStart(ev, divdom) {
    srcdiv = divdom;
    ev.dataTransfer.setData("text/html", divdom.innerHTML);
  }

  function drop(ev, divdom) {
    ev.preventDefault();
    if (srcdiv != divdom) {
      srcdiv.innerHTML = divdom.innerHTML;
      divdom.innerHTML = ev.dataTransfer.getData("text/html");
    }
  }

</script>

//样式
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
  }

  .container div {
    width: 30%;
    height: 30%;
    margin: 1%;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: grab;
  }

  .container div:active {
    cursor: grabbing;
  }
</style>