정렬 가능한 div jquery

Question

정렬 가능한 div 문제. div를 "drop"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"> 
 
\t <div id="origin" class="fbox"> 
 

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

Answer 1

좋아요? https://jsfiddle.net/a7ukbgkd/

그냥 이렇게 :

#drop .draggable 
{ 
    float: left 
} 

Answer 2

div 인 블록 레벨 요소이어야한다. 그것들은 기본적으로 중단됩니다. 당신의 div 요소

display:inline 

: 당신은 어느 유구를 기본적으로 레벨을 차단하거나 적용되지 않는 span 요소를 사용할 수 있습니다. 그런데

---

.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> 

무선의 물리적 배치에 의해 영향을받지 않는다 정확히 똑같이 렌더링됩니다. 화면에 표시되는 방식에 영향을주는 스타일입니다.