我正在尝试使用Packery构建带有可拖动小部件的仪表板(使用Draggabilly进行拖动)。小部件的宽度由Bootstrap类确定,以响应各种屏幕尺寸。我也在使用jQuery来抓取元素和东西。
CodePen 链接
HTML 片段
<div class='container'>
<div class='row' id='dashboard-root'>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some content</br></br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Some other content<br>
</div>
<div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
Even more content<br><br><br><br>
</div>
<div class='dashboard-item col-xs-12 col-sm-12 col-md-8 col-lg-6'>
Some wide content is super wide, even wider than you even thought possible, like this is so crazy wide you wouldn't believe it.
</div>
</div>
</div>
CSS 片段
.dashboard-item{
border-style: solid ;
}
.container{
border-style: dashed ;
}
JavaScript 代码段
var $root = $('#dashboard-root') ;
$root.packery({
itemSelector: '.dashboard-item'
});
$root.find('.dashboard-item').each(function(i, itemElem){
var draggie = new Draggabilly(itemElem) ;
$root.packery('bindDraggabillyEvents', draggie);
});
就目前而言,小部件是可拖动的,但我需要它们捕捉到某种网格。目前,它们可以放置在任何地方,这使得定位很奇怪。
我试图弄清楚如何让它们捕捉到 Bootstrap 的网格列。理想情况下,我认为我希望元素捕捉到最近的 col-*-1。虽然不知道如何处理高度。
我尝试将columnWidth设置为虚拟元素的选择器,但我无法让它工作。