在不使用jquery的情况下按住鼠标并拖动

// 获取需要拖动的元素
var element = document.getElementById('dragElement');

// 记录鼠标按下时的初始位置
var initialX, initialY;

// 监听鼠标按下事件
element.addEventListener('mousedown', function(event) {
  initialX = event.clientX;
  initialY = event.clientY;

  // 监听鼠标移动事件
  document.addEventListener('mousemove', dragElement);
  
  // 监听鼠标松开事件
  document.addEventListener('mouseup', stopDragging);
});

// 定义拖动函数
function dragElement(event) {
  // 计算鼠标移动的距离
  var deltaX = event.clientX - initialX;
  var deltaY = event.clientY - initialY;

  // 更新元素的位置
  var elementX = parseInt(element.style.left) || 0;
  var elementY = parseInt(element.style.top) || 0;
  element.style.left = (elementX + deltaX) + 'px';
  element.style.top = (elementY + deltaY) + 'px';

  // 更新初始位置
  initialX = event.clientX;
  initialY = event.clientY;
}

// 停止拖动函数
function stopDragging() {
  // 移除鼠标移动事件和鼠标松开事件的监听
  document.removeEventListener('mousemove', dragElement);
  document.removeEventListener('mouseup', stopDragging);
}