2 CSS div：允许（右）div中的可排序项目创建新的可排序行，而不是（右）div清除其他（左）div答案

【问题标题】：2 CSS divs: Allow sortable items in (right) div to create new sortable row instead of (right) div clearing other (left) div2 CSS div：允许（右）div中的可排序项目创建新的可排序行，而不是（右）div清除其他（左）div
【发布时间】：2014-09-14 21:43:50
【问题描述】：

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

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

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

在窗口移动之前（因为它们适合浏览器，所以全部堆叠在一行中）：

X X X X X X

移窗后（缩小后的浏览器只能放4个时，另外两个要换行）：

X X X X

X X

您可以在此处查看代码：jsfiddle.net/6ZWq6/18

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

我尝试在第二个流体 div 上将 clear 设置为 none，但并没有改变这种行为。我还尝试将固定柱向左浮动，将流体柱向右浮动，它也没有改变。有没有办法让可排序的 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"
    });

谢谢！

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

你可以试试这段代码

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

【讨论】：

感谢您提供！但是，当我在对新行进行排序之前缩小窗口时，它仍然会清除左侧固定 div 下方的右侧流体 div。

【解决方案2】：

你能检查一下这个小提琴链接，你可能会得到答案

$(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/

【讨论】：

jsfiddle.net/6ZWq6/18 我在一些图片中添加了您放入其中的代码中的示例。它卡在底部。你知道是什么原因造成的吗？
我更新了您现有的小提琴文件以解决图片问题，请查看此链接jsfiddle.net/6ZWq6/28。这对你很有用。还有宽度和高度问题，可能是由于图像尺寸太大。
非常感谢您的帮助！我很感激！

【解决方案3】：

感谢 Philip Tenn 帮助我修复 CSS，这最终成为了解决方案！

CSS 更改为：

.left-fixed {

    padding: 10px;
    background: #ccc;
    width: 160px;
    float: left;
    min-height:500px;
    overflow: auto;
}

.right-fluid {
    list-style: none;
    padding: 10px;
    margin-left: 160px;
}

工作代码在这里：

http://jsfiddle.net/ptenn/6ZWq6/19/

【讨论】：