JS实现盒子拖拽效果

本文实例为大家分享了JS实现盒子拖拽效果的具体代码，供大家参考，具体内容如下

效果:

html代码:

css代码:

    .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;
    }
  

js代码:

关于事件的用法,官方用到了object.addEventListener("dragover", myscript)和event.target.id

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。