如何使预先添加的元素可拖动

要使预先添加的元素可拖动，可以通过使用HTML5的Drag and Drop API来实现。以下是一种实现方法：

首先，在HTML中为要拖动的元素添加一个拖动事件处理程序。例如，给元素添加一个draggable属性，并设置为true，表示该元素可拖动。

<div draggable="true">可拖动的元素</div>

接下来，为元素添加拖动事件的监听器。在监听器中，我们需要处理拖动开始、拖动过程和拖动结束这三个事件。

var draggableElement = document.querySelector('[draggable=true]');
draggableElement.addEventListener('dragstart', dragStart);
draggableElement.addEventListener('drag', drag);
draggableElement.addEventListener('dragend', dragEnd);

function dragStart(event) {
  // 拖动开始时的处理逻辑
  // 可以在这里设置拖动的数据类型和数据
  event.dataTransfer.setData('text/plain', event.target.id);
}

function drag(event) {
  // 拖动过程中的处理逻辑
  // 可以在这里实现拖动时的视觉效果
}

function dragEnd(event) {
  // 拖动结束时的处理逻辑
  // 可以在这里进行一些清理工作
}

接下来，我们需要为接收拖动元素的容器添加拖放事件的监听器。在监听器中，我们需要处理拖动元素进入容器、在容器内拖动和拖动元素离开容器这三个事件。

var dropContainer = document.querySelector('.drop-container');
dropContainer.addEventListener('dragenter', dragEnter);
dropContainer.addEventListener('dragover', dragOver);
dropContainer.addEventListener('dragleave', dragLeave);
dropContainer.addEventListener('drop', drop);

function dragEnter(event) {
  // 拖动元素进入容器时的处理逻辑
  // 可以在这里实现一些视觉效果，如高亮容器
  event.preventDefault();
}

function dragOver(event) {
  // 在容器内拖动时的处理逻辑
  // 可以在这里阻止默认的拖放行为
  event.preventDefault();
}

function dragLeave(event) {
  // 拖动元素离开容器时的处理逻辑
  // 可以在这里恢复容器的默认样式
}

function drop(event) {
  // 拖动元素放置到容器中时的处理逻辑
  // 可以在这里获取拖动的数据并进行相应的操作
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
  var draggedElement = document.getElementById(data);
  // 在容器中添加拖动的元素
  event.target.appendChild(draggedElement);
}

通过以上步骤，我们就可以实现预先添加的元素可拖动的效果了。当拖动元素进入容器时，容器会高亮显示；在容器内拖动时，可以实现自定义的视觉效果；拖动元素放置到容器中时，容器会接收并添加拖动的元素。

请注意，以上代码只是一种基本实现方法，具体的实现方式可能会根据具体的需求和场景有所不同。在实际开发中，你可能还需要考虑拖动元素的限制范围、拖动过程中的边界检测、拖动元素的复制和删除等功能。