我正在使用这个 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 上的 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'} 时没有任何效果。
最佳答案
如果它在没有 handle 的情况下工作但之后不工作，那么您可能拼错了值(因此 handle 无法匹配您的选择器)或者您的标记不是您布置的方式。如果在您删除 Draggabilly 构造函数的第二个参数时它不起作用，那么您的初始化逻辑是错误的。 PS 我假设您在简化附加代码时没有将按钮包含在类 .toggle-drag-button 中，但是标记中缺少它并且您的点击处理程序没有绑定(bind)到任何东西。
-- 编辑--
在您的标记中，您同时拥有 .grid-sizer 和 .gutter-sizer。我假设您不需要两者。
您的问题是您的装订线与 percentPosition 相结合。请参阅此处的工作示例:https://codepen.io/yonywithawhy/pen/qgdjar
确保在 .gutter-sizer 上设置了宽度。如果你不这样做，你会看到第二个方 block 跳得很远。看起来这些 block 是不可拖动的，但事实并非如此——只是很难看到。如果您将底部的 div 一直拖到顶部并松开，您将看到框的顺序发生变化。如果没有宽度大小，则不能使用 percentPosition。
关于javascript - 为什么我的 packery.js + draggabilly.js '.handle' 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54316018/