如何在两个元素之间插入元素。

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个按钮移至其相应位置，例如点击1和2之间会使数字变成1 4 2或者点击2和3之间会使数字变成2 4 3，如果已经移动了4，则在3后面点击将数字变为1 2 3 4。

但是只有在按钮上点击，数字4才会添加到按钮中，如果在元素之间的白色空间中点击，则不会发生任何事情。

就像拖动效果一样，可以更改位置。

同时，如果点击按钮最近的左侧，它会放置在左侧的空间中，并且右侧相同。

- Joe Doe

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>

- user2932057

---

点击按钮1之前不会将按钮4放在第一位。 - Joe Doe

@JoeDoe 你可以在 for 循环中处理它作为一种特殊情况。 - shrys

@JoeDoe - 已解决您的问题.. 逻辑很简单：鼠标事件 ev.clientX < button.clientX => 在按钮后插入按钮4 - Nareen Babu

如果我在4 1 2 3中点击1和2之间，我得到的是1 2 4 3而不是1 4 2 3，同样地，如果我在2和3之间点击，我得到的是1 2 3 4而不是1 2 4 3。 - Joe Doe

@JoeDoe Button4 会移动到鼠标光标单击位置旁边，而不管按钮位置。另外，你提到的那个情况，请只修复那个情况。 - Nareen Babu

Answer 2

这是你要找的吗？

document.getElementById("div").onclick = function(ev) {
  if (ev.target.id == "btn4") return;
  var btn = document.getElementById("btn4");
  btn.parentNode.removeChild(btn);
  ev.target.insertAdjacentElement("afterend", 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>

- shrys

---

这仅在您点击按钮时有效。他要求能够在按钮之间单击。 - frobinsonj