JQuery UI Sortable只允許拖動到頂部從底部夾住

Question

我正在使用JQuery UI和Sortable爲了拖動portlets並在幾個不同的連接「.column」DIV之間重新排序。

問題是，要將Portlet拖動到任何列的最頂端位置，您必須抓住/單擊Portlet的底部。如果您從portlet頂部單擊/拖動，您將無法將portlet放置在列的最頂端......至少在沒有相當大的努力移動portlet的情況下不會這樣做。

我已經嘗試使用「cursorAt」屬性來強制光標到底部，拖動通常工作，但它沒有所需的效果。例如：cursorAt：{左：205，底部：5}

這是問題的一個的jsfiddle：

http://jsfiddle.net/KxP72/

否則，這裏是代碼，開始使用JavaScript：

$(function() { 
$(".column").sortable({ 
    connectWith: ".column" 
}); 
$(".column").disableSelection(); 
}); 

這裏是CSS

.ui-sortable-placeholder {border: 1px dashed #7E7F81; visibility: visible !important;   height: 200px !important;} 
.ui-sortable-placeholder * {visibility: hidden;} 
#container {width: 100%; display: inline-block; border-top: 1px solid #3B3D41; border-  bottom: 1px solid #000; text-align: center;} 
#object_body {display: inline-block; margin: 0px auto 0px auto; padding: 200px 30px 200px 0px; position: relative; text-align: left;} 
div.column {float: left; display: inline-block; width: 437px;} 
div.portlet {display: inline-block; padding: 5px; width: 400px; min-height: 225px; background: #141517; border: 1px solid #111; margin: 25px 0px 0px 25px; color: #FFF; float: left; position: relative; cursor: move; box-shadow: 1px 1px 0px #3D3F42; -moz-border-  radius: 5px; border-radius: 5px;} 
div.portlet img {width: 400px; margin-left: 0px;} 

這裏是HTML：

<div id="container"> 
<div id="object_body"> 
     <div class="column ui-sortable"> 
      <div class="portlet"> 
       <img src="http://druble.blob.core.windows.net/object/object_11151.jpg" style="height: 266px;"> 
     </div> 
      <div class="portlet"> 
       <img src="http://druble.blob.core.windows.net/object/object_11171.jpg" style="height: 266px;"> 
     </div> 
      <div class="portlet"> 
       <img src="http://druble.blob.core.windows.net/object/object_11191.jpg" style="height: 266px;"> 
     </div> 
     </div> 
     <div class="column ui-sortable"> 
    <div class="portlet"> 
       <img src="http://druble.blob.core.windows.net/object/object_11161.jpg" style="height: 266px;"> 
     </div> 
      <div class="portlet"> 
       <img src="http://druble.blob.core.windows.net/object/object_19951.jpg" style="height: 501px;"> 
     </div> 
      <div class="portlet"> 
       <img src="http://druble.blob.core.windows.net/object/object_11201.jpg" style="height: 266px;"> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

您可以.column和.portlet刪除float:left，並讓他們都顯示：塊，而不是inline-block的。爲了讓它們也對齊，您可以將#object_body更改爲display:block。

div.column {display: block;float: none;} 
div.portlet {display: block;float: none;} 

這裏我更新的jsfiddle http://jsfiddle.net/paulitto/KxP72/2/

利用具有可排序的容器float:left和/或display:inline使得它位於在最高層，和圖像排序變爲界限內有問題的（因爲它們是在它外面）。您可以例如將邊框添加到.column並查看它的外觀。