插入页面的div实现可拖动

要实现插入页面的div可拖动，可以使用以下步骤：

1.首先，在HTML中创建一个div元素，并为其添加一个唯一的ID，以便在JavaScript中引用它。

2.在CSS中，使用“position: absolute”属性将div定位在页面的任何位置。

3.在JavaScript中，使用鼠标事件（mousedown、mousemove、mouseup）来实现拖动功能。当鼠标按下时，记录当前鼠标位置和div位置，然后在鼠标移动时计算新的div位置，并更新div的样式。

以下是一个简单的示例代码，可以帮助你实现可拖动的div元素：

HTML代码：

<div id="draggable" class="box">
  Drag me!
</div>

CSS代码：

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  text-align: center;
  line-height: 200px;
  cursor: move;
}

JavaScript代码：

var draggable = document.getElementById('draggable');

var isDragging = false;
var mouseX = 0;
var mouseY = 0;
var boxX = 0;
var boxY = 0;

draggable.addEventListener('mousedown', function(e) {
  isDragging = true;
  mouseX = e.clientX;
  mouseY = e.clientY;
  boxX = draggable.offsetLeft;
  boxY = draggable.offsetTop;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var deltaX = e.clientX - mouseX;
    var deltaY = e.clientY - mouseY;
    draggable.style.left = boxX + deltaX + 'px';
    draggable.style.top = boxY + deltaY + 'px';
  }
});

document.addEventListener('mouseup', function(e) {
  isDragging = false;
});

在以上代码中，我们使用“cursor: move”属性将鼠标指针设置为拖动指针，以便用户知道该元素可以拖动。当用户按下鼠标时，我们记录当前鼠标位置和div的位置。然后，在鼠标移动时，我们计算新的div位置，并使用样式更新div的位置。最后，在鼠标松开时，我们将“isDragging”标志设置为false，以停止拖动。