javascript - 2个CSS div : Allow sortable items in (right) div to create new sortable row instead of (right) div clearing other (left) div

Question

我有一个容器，里面有 2 个 div:

一个是向左浮动的小的固定宽度左侧 div(类似于侧边菜单)。
第二个是流动的 div，它也向左浮动(以便能够与固定的 div 一起堆叠)。

第二个 div 具有向左浮动的可排序图标。当窗口缩小时，我希望图标向左移动并形成一个新行。例如，如果“X”是窗口内的一个图标，而我有 6 个图标。我的可排序元素看起来就像这里的示例 (http://jqueryui.com/sortable/)，只是它们 float 并堆叠到左侧而不是垂直，就像在这个例子。

在窗口移动之前(因为它们适合浏览器所以全部堆叠在一行中):

X X X X X X

window shift后(只有4个能装下缩小后的浏览器，另外两个应该另起一行):

XXXX

XX

你可以在这里看到代码:jsfiddle.net/6ZWq6/18

我的问题是，右侧的流体列将清除左侧的固定列并最终完全位于其下方，然后只有在它们彼此堆叠之后，它才会开始形成新的可排序行。我根本不想让右栏清除左栏，我只想让可排序的元素成为一个新行。

我尝试在第二个流体 div 上将 clear 设置为 none，但它并没有改变这种行为。我还尝试将固定列向左浮动，将流体列向右浮动，但也没有改变。有什么方法可以让sortable JS函数发生在清除之前，或者完全阻止它清除？

代码如下:

CSS:

.container
{
background: transparent;
overflow: hidden;
    clear: none;
}

.left-fixed {
background: #ccc;
padding: 10px;
width: 160px;
float: left;
min-height:500px;

}
.right-fluid {
list-style: none;
padding: 10px;
width: auto;
float: left;
overflow: auto;


}
.sortable-item {
cursor: move;
display: block;
font-weight: bold;
color:#CC0033;
margin: 5px;
float: left;

HTML:

<div class="container">  
    <div class="left-fixed connectedSortable" style="float:left"> 
        <div class="sortable-item"><span class="img1"></span>
        <p>Item Name Here</p>
        </div>
        </div>    
    </div>
    <div class="right-fluid connectedSortable" style="float:left"> 
        <div class="sortable-item"><span class="img2"></span>
        <p>Item Name Here</p>
        </div>
        </div>    
    </div>

JS:

   $(document).ready(function () {
   $('.right-fluid, .left-fixed').sortable({
        connectWith: ".connectedSortable"
    });

谢谢!

Answer 1

你能检查这个 fiddle 链接吗，你可能会得到答案

$(function() {
 $( "div.right-fluid" ).sortable({
connectWith: ".connectedSortable"


});
$( "div.left-fixed" ).sortable({
 connectWith: ".connectedSortable",
   dropOnEmpty: false 
});

 $( ".right-fluid, .left-fixed" ).disableSelection();
});



.container{background: transparent;overflow: hidden; clear: none;}

.right-fluid {padding: 10px;background: #ccc;width: 160px;float: left;
 min-height:500px;overflow: auto;}
.left-fixed {list-style: none;padding: 10px;width: 160px;float: left;}
.sortable-item {cursor: move;display: block;font-weight: bold;color:#CC0033;
 margin:5px;float: left;}

http://jsfiddle.net/6ZWq6/10/