javascript - 如何将元素放在两个元素之间

Question

document.getElementById("div").onclick = function(ev) {
  var btn = document.getElementById("btn4");
  btn.parentNode.removeChild(btn);
  ev.target.appendChild(btn);
}

button {
  margin-right: 10px;
}

<div id="div">
  <button id="btn1">1</button>
  <button id="btn2">2</button>
  <button id="btn3">3</button>
  <button id="btn4">4</button>
</div>

我想点击元素之间的空白将 4 按钮移动到它的位置，因为点击 between 1 2 将使数字 1 4 2 或在 2 3 之间点击将使数字 2 4 3 如果点击 3 数字将是 1 2 3 4 如果 4 已经移动

但数字 4 仅在单击按钮时才会添加到按钮内，如果在按钮之间的空白处单击则不会发生任何事情

喜欢改变位置的拖动效果

但也可以单击按钮的最左侧，将其放在左侧的空格中，与右侧的空格相同

Answer 1

请尝试下面的代码:

document.getElementById("div").onclick = function(ev) {
var divElement = document.getElementById("div");
var btn = document.getElementById("btn4");

var oTargetInsertionElement = null;
for (var i = divElement.children.length - 1; i >= 0; i--) {
    var oRect = divElement.children[i].getBoundingClientRect();

    if (divElement.children[0].getBoundingClientRect().x > ev.clientX) {
        oTargetInsertionElement = divElement.children[0];            
        //alert(divElement.children[0].id + ' - Before First Element');
        break;
    } else if (divElement.children[divElement.children.length - 1].getBoundingClientRect().x < ev.clientX) {
        oTargetInsertionElement = divElement.children[divElement.children.length - 1].nextSibiling;
        //alert(divElement.children[divElement.children.length - 1].id + ' - After Last Element');
        break;
    } else if (oRect.x < ev.clientX) {
        oTargetInsertionElement = divElement.children[i + 1];
        //alert(divElement.children[i].id + '-' + divElement.children[i + 1].id);
        break;
    }
}
if (oTargetInsertionElement != btn) {
    btn.parentNode.removeChild(btn);
    divElement.insertBefore(btn, oTargetInsertionElement);
}

}

button {
  margin-right: 10px;
}

<div id="div" style="padding:10px;">
  <button id="btn1">1</button>
  <button id="btn2">2</button>
  <button id="btn3">3</button>
  <button id="btn4">4</button>
</div>