可排序的div jquery

Question

可排序的div问题。当我将div拖到＆＃34; drop＆＃34; DIV。所有的div都来自另一个。

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

我需要一个div来一个接一个地横向移动。 例如。 在Sortable div中，它应该是<div>1<div><div>2<div><div>3</div> Html如下

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

function callInstagram($url) { $ch = curl_init(); curl_setopt_array($ch, array(CURLOPT_URL => $url, CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYPEER => false, CURLOPT_SSL_VERIFYHOST => 2)) $result = curl_exec($ch); curl_close($ch); return $result; } $url = "instagram.com/ravij28/";; $dom = new domDocument(); $dom->loadHTML(callInstagram($url)); $dom->preserveWhiteSpace = false; $tables = $dom->getElementsByTagName('script'); print_r($tables); ?> Still building 是一个块级元素。默认情况下，它们会中断。您可以使用默认情况下不是块级别的div元素，也可以应用sytle：

span

到您的display:inline 元素。

div

.draggable{
  display: inline
 }

顺便说一下，HML不受html

的物理布局的影响

<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>1<div>
<div>2<div>
<div>3</div>

将渲染完全相同。这些风格会影响它们在屏幕上的显示方式。

Answer 2

喜欢这个？ https://jsfiddle.net/a7ukbgkd/

这样做：

#drop .draggable
{
  float: left
}