js实现把input拖拽到另一个div中

您好，要实现将一个input元素拖拽到另一个div中，可以按照以下步骤操作：

1. 给需要拖拽的input元素添加一个mousedown事件监听器，并在事件处理函数中记录鼠标按下时的坐标和元素的初始位置。

let dragItem = document.querySelector('input');
let container = document.querySelector('#container');

let startX, startY, dragStartX, dragStartY;

dragItem.addEventListener('mousedown', e => {
  startX = e.clientX;
  startY = e.clientY;
  dragStartX = dragItem.offsetLeft;
  dragStartY = dragItem.offsetTop;
});

2. 给document对象添加一个mousemove事件监听器，并在事件处理函数中计算鼠标移动的距离，并将元素的位置设置为初始位置加上鼠标移动的距离。

document.addEventListener('mousemove', e => {
  e.preventDefault();
  if (startX && startY) {
    let dragX = e.clientX - startX;
    let dragY = e.clientY - startY;
    dragItem.style.left = dragStartX + dragX + 'px';
    dragItem.style.top = dragStartY + dragY + 'px';
  }
});

3. 给document对象添加一个mouseup事件监听器，并在事件处理函数中判断元素是否进入了目标容器中，如果是则将元素添加到目标容器中。

document.addEventListener('mouseup', e => {
  if (startX && startY) {
    let dropX = e.clientX;
    let dropY = e.clientY;
    let containerRect = container.getBoundingClientRect();
    if (dropX >= containerRect.left && dropX <= containerRect.right && dropY >= containerRect.top && dropY <= containerRect.bottom) {
      container.appendChild(dragItem);
    }
    dragItem.style.left = dragStartX + 'px';
    dragItem.style.top = dragStartY + 'px';
    startX = null;
    startY = null;
  }
});

以上代码实现了将一个input元素拖拽到另一个div中的功能。当鼠标按下时，记录元素的初始位置和鼠标按下时的坐标；当鼠标移动时，计算鼠标移动的距离，并将元素的位置设置为初始位置加上鼠标移动的距离；当鼠标松开时，判断元素是否进入了目标容器中，如果是则将元素添加到目标容器中。