如何拖放div並將它們相鄰放置在水平線上？

我正在使用一些JavaScript和jQuery代碼來將div放入另一個使用拖放功能的div中。我想將div圖像水平放置在彼此相鄰的位置並獲取它們的值。我有很多div，我新來javascript和jquery的東西。請在這方面幫助我。以下是代碼：如何拖放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)); 
 
}

<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的平鋪？

來源

2017-08-03 Muhammad Shahid

您可以添加一些CSS像'格{顯示：inline-block的; }'保持水平。仍然不確定這是否能解決問題，因爲我看不到所有的HTML和CSS（如果有的話）。這只是一個猜測。 – dbrree

非常感謝它的工作。但問題的第二部分是如何關聯來自不同div的數據並將結果連接起來以顯示在單個列表中？ –

好的真棒！如果您可以將我的答案標記爲正確，我將不勝感激！ – dbrree

您需要給每個子div一個寬度。
確保父容器具有設定的寬度。
您需要設置子div以顯示：inline-block;

一旦設置，它們應該在您放置新元素時自動對齊內聯對齊。

如果您無法在元素上設置隱式寬度，請改爲使用Flexbox。

來源

2017-08-03 15:16:57 Korgrue

請回答我的第二部分問題，我會非常感謝你。 –

我以爲我做到了。這將水平對齊您的div。我重讀了你的問題，但我沒有看到問題的第二部分。 – Korgrue

已在上面的OP問題註釋中作爲工作答案進行確認。

以下內容添加到您的CSS：

div { display: inline-block; }

來源

2017-08-03 15:35:15 dbrree

不確定爲什麼這是下調，當OP確認這是他的問題下的評論中的工作答案？ – dbrree

到要內聯
塊給ID現在在你的CSS文件與您定義的ID的元素創建樣式。

.inline{ 
 
display : inline-block; 
 
}

<div> 
 
<div class="inline">1st div</div> 
 
<div class="inline">2nd div</div> 
 
<div class="inline">3rd div</div> 
 
</div>

來源

2017-08-03 16:08:43

您不想重複ID，因爲ID是唯一標識符。這些會比較好。 – dbrree

是的，完全可以在課堂上更好。 –

如何拖放div並將它們相鄰放置在水平線上？

回答

相關問題