Есть ли способ сделать только часть контейнера Packery/Draggabilly перетаскиваемой?

Question

Есть ли способ сделать только часть контейнера Packery/Draggabilly перетаскиваемой? Скажем, только сделать .chartHeader в приведенном ниже примере перетаскиваемым, но при этом общий .chartContainer перемещается как одна часть? В настоящее время только .chartHeader перетаскивается, и все остальное остается. Я бы хотел, чтобы все двигалось сразу, как одна большая счастливая семья.

Вот скрипка: http://jsfiddle.net/uD5rG/

Заранее спасибо!

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

Вот мой packery/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); 
     } 

Answer 1

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

я добавил опцию ручки draggabilly, видимый ниже

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

Answer 2

Используйте связывание с JQuery UI Перетаскиваемый. Он отлично работает для меня с атрибутом пользовательского интерфейса jQuery handle. http://packery.metafizzy.co/draggable.html#jquery-ui-draggable

Ваше решение, которое вы разместили на jsfiddle, не работает для меня.

Answer 3

Просто используйте опцию ручки, как упомянутый Коул.

$(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/