Изменение размера родителя сдерживания элемента JQuery Draggable при перетаскивании

Question

У меня есть элемент div 'slide' в родительском контейнере div 'box' и применил JQuery Draggable к дочернему. Пока элемент перетаскивается, я изменяю размер родительского контейнера, иногда сокращаясь, иногда увеличивая его.

Проблема заключается в том, что JQuery не реагирует на это изменение размера и по-прежнему содержит перетаскиваемый элемент в исходных размерах родителя, а не в пределах его текущего размера, до мыши - следующий сеанс перетаскивания будет использовать новые измерения (пока он не изменится снова).

Чтобы попытаться решить эту проблему, я надеялся вызвать событие MouseUp сопровождаемого MouseDown события, так что JQuery будет использовать новый размер контейнера:

$('.slide').draggable({ axis: "x", containment: 'parent', 
        drag: function (e, ui) { 
         resizeContainer(); 

         if (outsideContainer()){ 

         // Try to stop and restart dragging 
          $(this).trigger('mouseup'); 
          $(this).trigger('mousedown'); 
         } 
        } 

Однако это вызывает исключение ...

Unable to get value of the property '0': object is null or undefined 

... на этой линии JQuery код:

this.helper[0].style.left=this.position.left+"px"; 

Любой знает, ч ow Я могу либо a) получить Draggable, чтобы реагировать в реальном времени на изменение родительских измерений, либо b) запускать перетаскивание, а затем плавно перетаскивать?

Спасибо.

Answer 1

@Fijjit, если я правильно понимаю, то, что вы хотите, является пользовательской функцией «сдерживания», которая реализует ваш алгоритм resizeContainer, прежде чем применять границы к перетаскиваемому элементу.

В приведенном ниже коде,

• стандарт draggable containment опция опущена
• resizeContainer прилагается в качестве обработчика события draggable drag
• resizeContainer имеет двойное назначение; (А) он выполняет свой алгоритм изменения размера и (б) применяет алгоритм пользовательского КОНТЕЙНМЕНТ

JavaScript:

$(function(){ 
    var $container = $("#myContainer"); 

    function resizeContainer(e, ui) { 
     //implement container resize algorithm here 
     var w1 = ui.helper.outerWidth(), 
      w2 = $container.width(); 
     ui.position.left = Math.max(Math.min(ui.position.left, w2 - w1), 0); 
    } 

    $("#draggable").draggable({ 
     axis: "x", 
     drag: resizeContainer 
    }); 
}); 

См fiddle demo