SOURCE

console 命令行工具 X clear

                    
>
console
let dragged;

/* events fired on the draggable target */
const source = document.getElementById("draggable11");
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {

//   event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // reset the transparency
//   event.target.classList.remove("dragging");
    console.log('aaa', event)
source.style.left = event.offsetX + 'px'
source.style.top = event.offsetY + 'px'

});



<div id="draggable11" draggable="true">
这个 div 可以拖动
</div>
<!-- <div class="dropzone"></div> -->
body {
  /* Prevent the user selecting text in the example */
  user-select: none;
}

#draggable11 {
  background: white;
  width: fit-content;
  position: relative;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}


.dragging {
  opacity: .5;
}