带Bootstrap网格的包装

Question

我正在尝试使用 Packery 来构建带有可拖动窗口小部件的仪表板（使用 Draggabilly 进行拖动）。小部件的宽度由 Bootstrap 类确定，以便对各种屏幕大小做出响应。我也在使用 jQuery 来抓取元素和东西。

CodePen Link

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设置为虚拟元素的选择器，但我无法使其工作。