jQuery可排序儀表板對齊

我正在嘗試用jQuery排序創建儀表板（xbox一種樣式）。我有幾個不同大小的portlet，我可以移動，但我似乎無法將一些拖到正確的位置，我不知道爲什麼。jQuery可排序儀表板對齊

下面你可以看到它目前的樣子。我不能拖累銷售在線諮詢/培訓信息，並在另一側同樣之間（以創建一個完整的正方形）

HTML：

<div class="sortable"> 
       <div class="portlet span-1"> 
        <div class="portlet-header">Sales</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Online Help</div> 
        <div class=""></div> 
       </div> 

       <div class="portlet span-3"> 
        <div class="portlet-header">Xpress Mail</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Online Help</div> 
        <div class=""></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Online Help</div> 
        <div class=""></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">Training Info</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-2"> 
        <div class="portlet-header">My Fogbugz</div> 
        <div class="portlet-content"></div> 
       </div> 

       <div class="portlet span-1"> 
        <div class="portlet-header">User Group</div> 
        <div class="portlet-content"></div> 
       </div> 

      </div>

CSS：

.sortable { 
width: 100%; 
height: 700px; 
font-size: 0; 
border-radius: 5px; 
} 

.portlet { 
font: 12px/1.3 sans-serif; 
margin: 3px; 
padding: 1px; 
display: inline-block; 
vertical-align: top; 
height: 200px; 
background-color:deepskyblue; 
} 

.portlet.span-1 { width: 300px; } 
.portlet.span-2 { width: 600px; } 
.portlet.span-3 { width: 600px; height:400px} 

.portlet-header { 
margin: 1px; 
padding: 1px 0 2px 3px; 
} 

.portlet-header .ui-icon { 
float: right; 
} 

.portlet-content { 
padding: 4px; 
} 

.portlet-minimized { 
height: auto; 
} 

.portlet-minimized .portlet-content { 
display: none; 
} 

.ui-sortable-placeholder { 
border: 1px dotted black; 
visibility: visible !important; 
}

JS：

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

    $('.portlet') 
     .addClass('ui-widget ui-widget-content ui-corner-all') 
     .find('.portlet-header') 
      .addClass('ui-widget-header ui-corner-all') 
      .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
     .end() 
     .find('.portlet-content') 
      .text(''); 

    $('.portlet-header .ui-icon').on('click', function() { 
     $(this).toggleClass('ui-icon-minusthick ui-icon-plusthick'); 
     $(this).closest('.portlet').toggleClass('portlet-minimized'); 
    }); 
});

來源

2016-10-05 user3208483

你應該看看Gridster，一個JS庫，可以幫助你做到這些：http://dsmorse.github.io/gridster.js/ –

謝謝，我會考慮看看 – user3208483

@ user3218507你看起來像是在窗口四處拖動框，並將它放在你想要的地方？ –

也許你看這個東西，沒有什麼只是錯過了ui-helper-clearfix here .addClass（「ui-widget ui-widget-content ui-helper-clearfix ui-corner-all」）。如果我錯了。問我評論我會回答。 LiveFiddle


 

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

 
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
 
    .find(".portlet-header") 
 
    .addClass("ui-widget-header ui-corner-all") 
 
    .prepend('<span class="ui-icon ui-icon-minusthick"></span>') 
 
    .end() 
 
    .find(".portlet-content").text(' '); 
 
    $('.portlet-header .ui-icon').on('click', function() { 
 
    $(this).toggleClass('ui-icon-minusthick ui-icon-plusthick'); 
 
    $(this).closest('.portlet').toggleClass('portlet-minimized'); 
 
    }); 
 
})


 

 
body{ 
 
    background:#bbb; 
 
    background-repeat:no-repeat; 
 
     } 
 
    .sortable { 
 
    width: 100%; 
 
    height: 700px; 
 
    font-size: 0; 
 
    border-radius: 5px; 
 
} 
 

 
.portlet { 
 
    font: 12px/1.3 sans-serif; 
 
    margin: 3px; 
 
    padding: 1px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 200px; 
 
    background-color: deepskyblue; 
 
} 
 

 
.portlet.span-1 { 
 
    width: 300px; 
 
} 
 

 
.portlet.span-2 { 
 
    width: 600px; 
 
} 
 

 
.portlet.span-3 { 
 
    width: 600px; 
 
    height: 400px 
 
} 
 

 
.portlet-header { 
 
    margin: 1px; 
 
    padding: 1px 0 2px 3px; 
 
} 
 

 
.portlet-header .ui-icon { 
 
    float: right; 
 
} 
 

 
.portlet-content { 
 
    padding: 4px; 
 
} 
 

 
.portlet-minimized { 
 
    height: auto; 
 
} 
 

 
.portlet-minimized .portlet-content { 
 
    display: none; 
 
} 
 

 
.ui-sortable-placeholder { 
 
    border: 1px dotted black; 
 
    visibility: visible !important; 
 
}

<head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    </head> 
 
    <body> 
 
<div class="sortable"> 
 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Sales</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Online Help</div> 
 
<div class=""></div> 
 
    </div> 
 

 
    <div class="portlet span-3"> 
 
<div class="portlet-header">Xpress Mail</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Online Help</div> 
 
<div class=""></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Online Help</div> 
 
<div class=""></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">Training Info</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-2"> 
 
<div class="portlet-header">My Fogbugz</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
    <div class="portlet span-1"> 
 
<div class="portlet-header">User Group</div> 
 
<div class="portlet-content"></div> 
 
    </div> 
 

 
</div> 
 

 
    </body>

來源

2016-10-05 23:55:33

jQuery可排序儀表板對齊

回答

相關問題