перетащите падение только одну кнопку внутри div

Question

Здравствуйте, я создаю веб-приложение, в котором я хочу перетащить кнопку внутри элемента div,

Я нашел что-то в w3schools и после обхода сделал что-то вроде следующего

но я хочу, если я перетаскиваю вторую кнопку в div,

первая должна изменить свою позицию и вернуться в исходное положение,

Я создал фидлер, который не работает

не работает фидлер

Ниже приведен мой код

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, тогда, когда вы уроните какую-нибудь кнопку в области сбрасыванияпроверьте, есть ли у droppable дочерний элемент (в данном случае, 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>