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

<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);
}