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

【问题标题】：Why does my packery.js + draggabilly.js '.handle' not work?为什么我的 packery.js + draggabilly.js '.handle' 不起作用？
【发布时间】：2019-01-22 20:30:58
【问题描述】：

我使用这个 jquery 脚本来初始化 packery，将可拖动添加到 .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 上的 Draggabilly 示例：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>

packery 和 draggabilly 可以按预期工作，即使在托管链接和图像的 CSS3 网格中，但添加 {handle: '.title-wrapper'} 时没有任何效果。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果它在没有句柄的情况下可以工作，但之后不能，那么您要么拼错了值（因此句柄无法匹配您的选择器），要么您的标记不是您布置的方式。如果在您删除 Draggabilly 构造函数的第二个参数时它不起作用，那么您的初始化逻辑是错误的。 PS 我假设您在简化附加代码时没有包含带有类 .toggle-drag-button 的按钮，但标记中缺少它，并且您的点击处理程序没有绑定到任何东西。

-- 编辑--

在您的标记中，您同时拥有 .grid-sizer 和 .gutter-sizer。我假设你不需要两者。

您的问题是您的排水沟与百分比位置相结合。在此处查看工作示例：https://codepen.io/yonywithawhy/pen/qgdjar

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

【讨论】：

我已经包含了我的按钮 - 谢谢你的注意 :) 我检查了我的值并且它们拼写正确。我同意初始化，只是无法弄清楚问题出在哪里。
非常感谢您的回答！问题已解决:)