有没有办法使Packery / Draggabilly容器的一部分成为可拖动的?

问题描述 投票:0回答:4

是否有办法仅使Packery / Draggabilly容器的一部分可拖动?说,仅使以下示例中的.chartHeader可拖动-却使整个.chartContainer作为一个整体移动?当前,只有.chartHeader是可拖动的,其他所有都保留在后面。我想像一个幸福的大家庭一样,使一切都动起来。

这里是小提琴:http://jsfiddle.net/uD5rG/

提前感谢!

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

这是我的包装厂/ draggabilly配置:

        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 );
        }
packery
4个回答
5
投票

固定于http://jsfiddle.net/uD5rG/1/

我添加了draggabilly的handle选项,如下所示

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

0
投票

使用绑定到jquery UI Draggable。 jQuery UI属性handle对我来说很好用。http://packery.metafizzy.co/draggable.html#jquery-ui-draggable

您在jsfiddle上发布的解决方案不适用于我。


0
投票

只需使用提到的Cole之类的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);
    }


});

这里是一个简单的小提琴:http://jsfiddle.net/ex5TJ/

另外,请查看此链接以获取更多详细信息:http://draggabilly.desandro.com/


0
投票

使用jquery:

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