jQuery Sortableダッシュボードアラインメント

Question

jQueryソート可能なダッシュボード（xbox one style）を作成しようとしています。私は周りを移動することができますいくつかの異なるサイズのポートレットがありますが、私は正しい位置にいくつかをドラッグすることができないようだと私はなぜわからない。

以下は現在の外観です。私は（完全な四角形を作成するために）、オンラインヘルプ/トレーニング情報と反対側に同じの間に販売をドラッグすることができません

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'); 
    }); 
}); 

Answer 1

あなたは何かこれを探しているかもしれません。何もちょうどui-helper-clearfixがありませんでした。ここに.addClass（ "ui-widget ui-widget-content ui-helper-clearfixui-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>