可排序的 div jquery答案

【问题标题】：Sortable div jquery可排序的 div jquery
【发布时间】：2016-06-06 08:28:19
【问题描述】：

可排序的 div 问题。当我将 div 拖到“drop” div 时。所有 div 都在一个下方。

<div>1<div>
<div>2<div>
<div>3</div>

我需要一个 div 在水平方向一个接一个地出现。例如。在可排序的 div 中，它应该是 <div>1<div><div>2<div><div>3</div> html如下

   $("#origin").sortable({connectWith: "#drop"});
   $("#drop").sortable({connectWith: "#origin" });

 #origin
{
  
  min-width: 600px;
  min-height: 120px;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop
{
  background-color:yellow;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<div id="wrapper">
	<div id="origin" class="fbox">

<p></p>
		   <div id="one_1"   class="draggable">one</div>
		   <div id="two_2"   class="draggable">two</div>
		   <div id="three_3" class="draggable">three</div>
	</div>
  <p>test</p>
	<div id="drop" class="fbox">
   
	</div>
</div>

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

像这样？ https://jsfiddle.net/a7ukbgkd/

这样做：

#drop .draggable
{
  float: left
}

【讨论】：

【解决方案2】：

div 是块级元素。默认情况下，它们会中断。您可以使用默认不是块级的span 元素或应用样式：

display:inline

到您的div 元素。

.draggable{
  display: inline
 }

<div id="one_1"   class="draggable">one</div>
<div id="two_2"   class="draggable">two</div>
<div id="three_3" class="draggable">three</div>

顺便说一句，HML不受html物理布局的影响

<div>1<div>
<div>2<div>
<div>3</div>

和

<div>1<div><div>2<div><div>3</div>

将呈现完全相同。影响它们在屏幕上显示方式的是样式。

【讨论】：