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

Question

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

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

Answer 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.

Answer 3

using jquery:

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

Answer 4

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/