如何在Bootstrap卡片被拖拽投放至着陆区时将其隐藏

你注释里写的draggableElement.draggable.hide()是jQuery类库的写法，原生JavaScript没有这个API，要实现投放后隐藏、悬停显示的需求，可以通过添加/移除样式类的方式实现，这种方式兼容性好且便于控制交互效果。

第一步：可选样式定义 #

你可以自定义隐藏类，也可以直接用Bootstrap自带的d-none工具类，不需要额外写CSS：

/* 自定义隐藏类，需要渐变效果可以用这个，不用就直接用Bootstrap的d-none */
.hidden-dragged-card {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease; /* 渐变过渡效果，不需要可以删掉 */
}
/* 对应显示状态 */
.dropzone:hover .hidden-dragged-card {
  opacity: 1;
  pointer-events: auto;
}

第二步：修改onDrop函数 #

function onDrop(event) {
  // 必须阻止默认事件，否则drop事件不会触发
  event.preventDefault();
  var id = event.dataTransfer.getData("text");

  // 选中可拖拽元素
  var draggableElement = document.getElementById(id);

  // 兼容投放区点击到子元素的情况，获取真实投放区容器，.dropzone换成你实际的投放区类名
  var dropzone = event.target.closest('.dropzone');
  if (!dropzone) return;

  // 追加元素到投放区
  dropzone.appendChild(draggableElement);

  // 给卡片加隐藏类，用Bootstrap自带类就换成d-none
  draggableElement.classList.add('hidden-dragged-card');

  // 重置dataTransfer对象
  event.dataTransfer.clearData();
}

补充说明 #

• 必须在ondragover事件里添加event.preventDefault()，否则drop事件不会正常触发
• 如果需要一个投放区投放多张卡片，只需要调整CSS选择器的匹配逻辑，批量控制显示隐藏即可
• 如果不需要渐变效果，直接用Bootstrap的d-none类替换自定义的hidden-dragged-card即可，不需要额外写CSS

内容的提问来源于stack exchange，提问作者Baba