如何防止在droppable div之外拖拽(移动)元素？(仅限Vanila JS )

// 获取可拖拽元素和目标容器
const draggableElement = document.getElementById('draggable');
const droppableElement = document.getElementById('droppable');

// 添加dragstart事件监听器
draggableElement.addEventListener('dragstart', (event) => {
  // 设置数据类型和数据值
  event.dataTransfer.setData('text/plain', event.target.id);
});

// 添加dragover事件监听器
droppableElement.addEventListener('dragover', (event) => {
  // 阻止默认的拖放行为
  event.preventDefault();
  
  // 检查拖动元素的数据类型
  if (event.dataTransfer.types.includes('text/plain')) {
    // 允许拖放
    droppableElement.classList.add('dragover');
  } else {
    // 不允许拖放
    droppableElement.classList.remove('dragover');
  }
});

// 添加drop事件监听器
droppableElement.addEventListener('drop', (event) => {
  // 阻止默认的拖放行为
  event.preventDefault();
  
  // 获取拖动元素的数据值
  const draggableId = event.dataTransfer.getData('text/plain');
  
  // 执行相应的操作
  const draggableElement = document.getElementById(draggableId);
  droppableElement.appendChild(draggableElement);
  
  // 移除拖放样式
  droppableElement.classList.remove('dragover');
});