2 CSS的div：允許在（右）DIV排序項創建新的排序列，而不是（右）DIV清除其他（左）DIV

我有2周的div內的容器：2 CSS的div：允許在（右）DIV排序項創建新的排序列，而不是（右）DIV清除其他（左）DIV

一個是小的固定寬度左側div浮動到左側（如側面菜單）。
第二個是流體div，它也漂浮在左邊（能夠與固定div一起堆疊）。

第二個div有可向左浮動的可排序圖標。當窗口縮小時，我想讓圖標向左移動並形成一個新行。例如，如果「X」是窗口內的圖標，並且我有6個圖標。我的可排序項目看起來就像這裏的示例（http://jqueryui.com/sortable/），只是它們浮動並堆疊到左側而不是垂直，如示例。

窗口移（全部堆放在一個行，因爲他們適應瀏覽器）之前：

XXXXXX

窗口後移（當時只有4可以適應縮小的瀏覽器，另外兩個應作出新行）：

XXXX

你可以在這裏看到代碼：jsfiddle.net/6ZWq6/18

我的問題是，正確的流體柱會清除左邊的固定柱並最終完全落在它下面，然後只有在它們堆疊在彼此之上後，纔會開始形成新的可排序行。我不想讓右列清除左邊的那一列，我只想讓可排序的項目創建一個新的列。

我試着在第二個流體div上設置清零，並沒有改變這種行爲。我也嘗試將固定柱左側和液柱右側浮動，但它也沒有改變它。有沒有辦法在清理之前發生可排序的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" 
    });

謝謝！

來源

2014-07-23 Crystal Tenn

你能不能用這個代碼

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

來源

2014-07-23 16:11:47

多謝您的！但是，當我縮小窗口之前，它仍會清除左固定div下面的正確流體div，然後纔會對新行進行排序。 –

嘗試，你可以檢查此撥弄鏈接，你可能會回答

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

來源

2014-07-23 17:45:07

http://jsfiddle.net/6ZWq6/18/ 我在一些圖片中添加了一些內置代碼的示例。它卡在底部。你知道可能是什麼原因造成的嗎？ –

我更新了您現有的小提琴文件以解決圖片問題，請查看此鏈接http://jsfiddle.net/6ZWq6/28/。這對你很有用。在那裏還有寬度和高度問題，這可能是由於圖像尺寸太大。 –

非常感謝您的幫助！我很感激！ –

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

來源

2014-07-24 18:06:07

2 CSS的div：允許在（右）DIV排序項創建新的排序列，而不是（右）DIV清除其他（左）DIV

回答

相關問題