Is there a way to make only part of a Packery/Draggabilly container draggable?

依然范特西╮ 提交于 2019-12-25 01:46:15

问题


Is there a way to make only part of a Packery/Draggabilly container draggable? Say, only making the .chartHeader in the below example draggable - yet having the overall .chartContainer move as one piece? Currently, only the .chartHeader is draggable and everything else stays behind. I'd like to have everything move at once like one big happy family.

Here's a fiddle: http://jsfiddle.net/uD5rG/

Thanks in advance!

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

Here's my packery/draggabilly config:

        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 );
        }

回答1:


Fixed @ http://jsfiddle.net/uD5rG/1/

I added draggabilly's handle option, as seen below

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



回答2:


Use the binding to jquery UI Draggable. It works fine for me with the jquery UI attribute handle. http://packery.metafizzy.co/draggable.html#jquery-ui-draggable

Your solution, that you posted on jsfiddle does not work for me.




回答3:


Just use the handle option like Cole mentioned.

$(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);
    }


});

Here's a simple fiddle: http://jsfiddle.net/ex5TJ/

Also, have a look at this link for more details: http://draggabilly.desandro.com/




回答4:


using jquery:

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


来源:https://stackoverflow.com/questions/20529613/is-there-a-way-to-make-only-part-of-a-packery-draggabilly-container-draggable

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!