可排序 div jquery

Question

可排序 div 问题。当我将 divs 拖到 "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>

Answer 1

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

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>

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

Answer 2

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

只需这样做：

#drop .draggable
{
  float: left
}

可排序 div jquery

Sortable div jquery

jquery

jquery-ui

jquery-plugins