.container {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  text-align: center;
  padding-top: 20px;
}

.draggable {
  width: 150px;
  height: 150px;
  background-color: #8e44ad; /* 紫色 */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: grab;
  user-select: none;
}

.draggable:active {
  cursor: grabbing;
}

const draggable = document.getElementById("draggable");
const containerA = document.getElementById("containerA");
const containerB = document.getElementById("containerB");

// 當元素開始被拖動
draggable.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", e.target.id); // 傳遞被拖動元素的ID
});

// 許可容器A和容器B都可以放置元素
function allowDrop(event) {
  event.preventDefault(); // 必須阻止預設行為來允許放置
}

// 當元素被放置
function handleDrop(event, targetContainer) {
  event.preventDefault();
  const draggableId = event.dataTransfer.getData("text");
  const draggableElement = document.getElementById(draggableId);
  targetContainer.appendChild(draggableElement); // 將元素放到目標容器
}

// 允許 A 和 B 容器接受拖放
containerA.addEventListener("dragover", allowDrop);
containerB.addEventListener("dragover", allowDrop);

// 在 A 和 B 容器上放置元素
containerA.addEventListener("drop", (e) => handleDrop(e, containerA));
containerB.addEventListener("drop", (e) => handleDrop(e, containerB));