Packery 是否有办法使包装/可拖拉容器的一部分可拖拉？

是否有办法使包装/可拖拉容器的一部分可拖拉？比如说，在下面的示例中，只使.chartHeader可拖动，而使整个.chartContainer作为一个整体移动？目前，只有.chartHeader是可拖动的，其他所有内容都保留在后面。我想让一切都像一个幸福的大家庭一样一次行动起来

这是一把小提琴：

提前谢谢

    <div class="chartContainer">
        <div class="chartHeader">HEADER</div>
        <div class="chartContent">CONTENT</div>
    </div>

标题
内容

这是我的打包/拖动配置：

        var container = document.querySelector("#packeryContainer");
        var pckry = new Packery( container, {
            itemSelector: '.chartContainer',
            columnWidth: 350,
            rowHeight: 255,
            gutter: 15
        });

        // make packery items draggable
        var itemElems = pckry.getItemElements();
        // for each item...
        for ( var i=0, len = itemElems.length; i < len; i++ ) {
            var elem = itemElems[i];

            // get the .chartHeader element
            var headerElem = elem.querySelector(".chartHeader");

            // make element draggable with Draggabilly
            var draggie = new Draggabilly( headerElem );

            // bind Draggabilly events to Packery
            pckry.bindDraggabillyEvents( draggie );
        }

var container=document.querySelector（“packercontainer”）；
var pckry=新包装机（容器、{
itemSelector:“.chartContainer”，
列宽：350，
行高：255，
排水沟：15
});
//使包装物可拖动
var itemElems=pckry.getItemElements（）；
//对于每个项目。。。
对于（变量i=0，len=itemElems.length；i

已修复@

我添加了Draggably的句柄选项，如下所示

            // make element draggable with Draggabilly
            var draggie = new Draggabilly( elem , {
                handle: '.handle'
            });

固定@

我添加了Draggably的句柄选项，如下所示

            // make element draggable with Draggabilly
            var draggie = new Draggabilly( elem , {
                handle: '.handle'
            });

---

使用jquery UI可拖动的绑定。使用jQueryUI属性句柄，它对我来说很好。

---

您发布在JSFIDLE上的解决方案对我不起作用。

使用jquery UI Dragable的绑定。使用jQueryUI属性句柄，它对我来说很好。

---

您发布在JSFIDLE上的解决方案对我不起作用。

只需使用前面提到的句柄选项即可

$(function () {
    var $container = $('.packery');

    $container.packery({
        columnWidth: 80,
        rowHeight: 82 /* +2 for the bottom margin on .item */
    });

    // bind draggabilly events to item elements
    $container.find('.item').each(makeEachDraggable);

    function makeEachDraggable(i, itemElem) {
        // make element draggable with Draggabilly
        var draggie = new Draggabilly(itemElem, {
            handle: '.header'
        });
        // bind Draggabilly events to Packery
        $container.packery('bindDraggabillyEvents', draggie);
    }


});

这里有一把简单的小提琴：

---

另外，请查看此链接以了解更多详细信息：

只需使用前面提到的handle选项即可

$(function () {
    var $container = $('.packery');

    $container.packery({
        columnWidth: 80,
        rowHeight: 82 /* +2 for the bottom margin on .item */
    });

    // bind draggabilly events to item elements
    $container.find('.item').each(makeEachDraggable);

    function makeEachDraggable(i, itemElem) {
        // make element draggable with Draggabilly
        var draggie = new Draggabilly(itemElem, {
            handle: '.header'
        });
        // bind Draggabilly events to Packery
        $container.packery('bindDraggabillyEvents', draggie);
    }


});

这里有一把简单的小提琴：

另外，请查看此链接以了解更多详细信息：

使用jquery：

var draggie = $grid.find('.grid-item').draggable({
            handle: '.ui-sortable-handle'
        });
        $grid.packery('bindUIDraggableEvents', draggie);

使用jquery：

var draggie = $grid.find('.grid-item').draggable({
            handle: '.ui-sortable-handle'
        });
        $grid.packery('bindUIDraggableEvents', draggie);

---

它对我有用。你能详细说明一下Dragablely手柄的缺点吗？它对我很有用。你能详细说明一下拖拉手柄的缺点吗？