拖动时调整JQuery Draggable元素的包含父对象的大小 [英] Resizing a JQuery Draggable element's containment parent while dragging

问题描述

我在另一个div'box'父容器中有一个div'slide'元素，并且已将JQuery Draggable应用于子级.在拖动项目时，我正在调整父容器的大小，有时会缩小，有时会放大.

I have a div 'slide' element within another div 'box' parent container and have applied JQuery Draggable to the child. While the item is being dragged, I'm resizing the parent container, sometimes shrinking, sometimes enlarging it.

问题是JQuery不会对这种调整大小作出响应，并且在mouseup之前，仍将拖动的元素包含在父级的原始尺寸内，而不是在其当前尺寸内，直到mouseup为止-下一个拖动会话将使用新尺寸(直到它会再次发生变化.)

The problem is that JQuery doesn't respond to this resizing and still contains the dragged element within the original dimensions of the parent, rather than within its current size, until mouseup - the next drag session will use the new dimensions (until it changes again).

要尝试解决此问题，我希望触发mouseup事件，然后触发mousedown事件，以便JQuery使用新的容器大小:

To try and solve this, I was hoping to trigger the mouseup event followed by the mousedown event, so that JQuery will use the new container size:

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

但是，这引发了异常...

However, this throws an exception...

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

...在这行JQuery代码上:

...on this line of JQuery code:

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

任何人都知道我如何能a)使Draggable实时响应父尺寸的变化，或者b)触发拖动停止，然后无缝地拖动拖动?

Anyone know how I can either a) get Draggable to respond real-time to the change in parent dimensions or b) trigger a dragstop and then dragend seamlessly?

谢谢.

推荐答案

@Fijjit，如果我理解正确，那么您想要的是自定义包含"功能，该功能在将边界应用于拖动元素之前实现您的resizeContainer算法

@Fijjit, if I understand correctly, what you want is a custom "containment" function, which implements your resizeContainer algorithm before applying bounds to the dragged element.

在下面的代码中，

• 省略了标准draggable containment选项
• resizeContainer被附加为draggable drag事件处理程序
• resizeContainer是双重用途； (a)执行您的调整大小算法，并且(b)应用自定义遏制算法

• the standard draggable containment option is omitted
• resizeContainer is attached as the draggable drag event handler
• resizeContainer is dual purpose; (a) it performs your resize algorithm and (b) applies the custom containment algorithm

javascript:

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

请参见小提琴演示

这篇关于拖动时调整JQuery Draggable元素的包含父对象的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！