javascript - 如何拖放 div 并将它们相邻放置在一条水平线上？

Question

我正在使用一些 javascript 和 jquery 代码通过拖放功能将 div 放置在另一个 div 中。我想将 div 图像彼此水平相邻放置并获取它们的值。我有很多 div，我是 javascript 和 jquery 的新手。请在这方面帮助我。以下是代码:

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));
}

<div id="11" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" name="Driver"><span>Driver 1</span></div>
<div id="12" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" name="Driver"><span>Driver 2</span></div>
<div id="13" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="13"><span>Driver 3</span></div>
<div id="14" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="14"><span>Driver 4</span></div>
<div id="15" draggable="true" ondragstart="drag(event)"> <img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="15"><span>Driver 5</span> &nbsp</div>

如何水平放置 div？

Answer 1

1. 您需要给每个子 div 一个宽度。
2. 确保父容器具有设置的宽度。
3. 您需要将子div设置为display:inline-block;

设置后，当您放下一个新元素时，它们应该自动内联对齐。

如果您不能在元素上设置隐式宽度，则改用 Flexbox。