3

我正在尝试使用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设置为虚拟元素的选择器，但我无法让它工作。

4

0 回答 0