JS如何实现盒子拖拽效果？

红太狼 2020-06-22 14:17 881阅读 0赞

# JS如何实现盒子拖拽效果？

html实现示例代码:

```html
<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拖拽-蒲公英云</title>
<body>
  <p class="leftBox"></p>
  <p class="rightBox">
        
    <p class="circle" draggable="true"></p>
  </p>
</body>
  
</html>
```

css代码:

```html
<style>
    .leftBox {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
    }
  
    .rightBox {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      position: relative;
    }
  
    .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: radial-gradient(25px at center, white, skyblue);
      /* 绝对居中 */
      position: absolute;
      left: 50%;
      margin-left: -25px;
      top: 50%;
      margin-top: -25px;
    }
  </style>
```

js代码:

```html
<script>
  //获取dom元素,分别是左盒子 圆圈 右盒子
  var leftBox = document.querySelector('.leftBox');
  var circle = document.querySelector('.circle');
  var rightBox = document.querySelector('.rightBox');
  var text = document.querySelector('.text');
  
  //移动circle
  circle.
  
  //开启左盒子的移入事件
  leftBox.ondragover = function (event) {
    event.preventDefault();
  }
  leftBox.ondrop = function () {
    leftBox.appendChild(circle);
  }
  
  //开启右盒子的移入事件
  rightBox.ondragover = function (event) {
    event.preventDefault();
  }
  rightBox.ondrop = function () {
    rightBox.appendChild(circle);
  }
  
</script>
```

效果:
![](/images/1592835393843.gif)

说明：

![](/images/1592835376543.jpg)