拖放div内仅一个按钮

Question

您好，我正在创建一个Web应用程序，我想在其中拖放div内的按钮，

我在w3schools中发现了一些东西，并且在变通之后做了如下类似的事情

但是我想在div中拖放第二个按钮

第一个应该更改其位置，然后回到原始位置，

我创建了一个不起作用的提琴手

not working fiddler

以下是我的代码

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69">button 1</button>
<button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69">button 2</button>
<button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69">button 3</button>

Answer 1

如果我理解正确，那么您每次只希望在可放置区域内单击一个按钮，对吗？

您可以将按钮包装在div中，然后在可放置区域中放置一些按钮时，检查可放置对象是否已具有子元素（在本例中为button）。如果是，则将其选中，然后将其重新附加到作为按钮支架的div上。

类似于以下代码：

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    let target = ev.target;
    let btnsHolder = document.getElementById("buttonsHolder")
    let currentBtn;
    var data = ev.dataTransfer.getData("text");
    
    //check if there's already a button inside
    if (target.children.length > 0){
      currentBtn = target.children[0];
      btnsHolder.appendChild(currentBtn);
    }
    
    target.appendChild(document.getElementById(data));    
}

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="buttonsHolder">
  <button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69">button 1</button>
  <button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69">button 2</button>
  <button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69">button 3</button>
</div>