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可排序仪表板对齐

回答

相关问题