Question

我正在使用这个jquery脚本来初始化packery，将draggabilly添加到.grid-item元素，并启用/禁用拖动功能。

我对javascript / jquery不太了解，但是我尝试将我的代码与codepen.io上的示例以及以下问题进行比较： Is there a way to make only part of a Packery/Draggabilly container draggable?

Packery和Draggabilly的示例和文档：https://packery.metafizzy.co/draggable.html#draggabilly

https://draggabilly.desandro.com/
在Codepen上可拖动的示例：https://codepen.io/desandro/pen/xbyEyO

似乎没有人让我的代码可以使用句柄。

<body>
  <div class="row">
    <div class="">
      <button class="toggle-drag-button">Toggle drag</button>
    </div>
  </div>
  <div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="grid-item">
     <div class="title-wrapper">
       <span>FontAwesome</span><span>Title text</span>
     </div>
    </div>
  </div>
<script>
var $grid = $('.grid').packery({
  // options
  itemSelector: '.grid-item',
  gutter: '.gutter-sizer',
  percentPosition: true,
  horizontalOrder: true
});

// collection of Draggabillies
var draggies = [];
var isDrag = false;

// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
  var draggie = new Draggabilly( gridItem, {
    handle: '.title-wrapper'
  });
  draggies.push( draggie );
  // bind drag events to Packery
  $grid.packery( 'bindDraggabillyEvents', draggie );
});

$('.toggle-drag-button').on( 'click', function() {
  var method = isDrag ? 'disable' : 'enable';
  draggies.forEach( function( draggie ) {
    draggie[ method ]();
  });
  // switch flag
  isDrag = !isDrag;
});
</script>
</body>

即使在托管链接和图像的内部包含CSS3网格，打包器和拖动对象也能按预期工作，但是添加{handle：'.title-wrapper'}时，一切正常。

Answer 1

如果没有句柄就可以工作，但是之后没有起作用，则说明您拼写了错误的值（因此，句柄无法与选择器匹配），或者标记不是您布置的方式。如果在删除Draggabilly构造函数的第二个参数时不起作用，则您的初始化逻辑错误。 PS：我假设您在简化附加代码时未在类。toggle-drag-button中包含按钮，但标记中缺少该按钮，并且单击处理程序未绑定任何内容。

-编辑-

在标记中，您同时具有.grid-sizer和.gutter-sizer。我认为您不需要两者。

问题是您的装订线与percentPosition结合在一起。在此处查看工作示例：https://codepen.io/yonywithawhy/pen/qgdjar

确保在.gutter-sizer上设置宽度。如果不这样做，您将看到第二个方块跳得很远。看起来这些块不可拖动，但事实并非如此-很难看到。如果将底部div一直拖动到顶部并松开，则会看到框的更改顺序。没有宽度大小就不能使用percentPosition。

为什么我的packery.js + draggabilly.js'.handle'不起作用？

1 个答案: