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 ，如果在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>

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>

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

2 个答案: