Question

我目前正在尝试对组件的调整大小和拖动应用包含。拖动完全接受包含边界，但调整大小决定突破并且不遵循我设置的指定边界 - 我在这里做错了什么？

请参阅以下jsFiddle（http://jsfiddle.net/cyVYq/30/）;

$(".Event3").draggable({
    axis: "x",
    containment: "#2"
}).resizable({
    axis: "x",
    handles: "e, w",
    containment: "#2"
})

非常感谢，

Answer 1

您试图在不是父元素的元素中包含resizable（#2）

尝试将容器设置为其父.TimelineContainer：

$(".Event3").resizable({
    axis: "x",
    handles: "e, w",
    containment: ".TimelineContainer"
})

Fiddle

<强>更新

从JQuery-UI文档中可以看出，包含选项的预期用途是在父元素的范围内使用。似乎不可能按照您的意图使用此选项。尝试类似：

$(".Event3").resizable({
    axis: "x",
    handles: "e, w",
    containment: ".TimelineContainer",
    resize: function(event, ui) {
        // Define the dimensions of this element
        var left = ui.position.left;
        var width = ui.size.width;
        var right = left + width;
        // Define my constraints based on the element #2
        var constraintLeft = $('#2').position().left;
        var constraintWidth = $('#2').width();
        var constraintRight = constraintLeft + constraintWidth; 
        // if resizable has gone further left than the constraint
        if(left < constraintLeft) { 
            var left = parseInt($(this).css('left'));
            // measure the difference between this left and the constraint left
            var difference = constraintLeft - left;
            // make up the difference
            $(this).css('left', constraintLeft);      
            // make sure your width stays the same
            $(this).width($(this).width() - difference);
            // cancel the event
            $(this).resizable('widget').trigger('mouseup');
        }
        // if resizable has gone further right than the constraint
        if( right > constraintRight) {
            // change the width to fit between the constraint right and this left
            $(this).width(constraintRight - left);
            // cancel the event
            $(this).resizable('widget').trigger('mouseup');
        }
    }
});

在手动定义resizable的边界的情况下，当resizable到达那些边界时调用mouseup。这是玩弄的小提琴：

Fiddle

Jquery UI Draggable + Resizable Containment问题

1 个答案: