Question

我有一个工作区，我可以拖放我的元素并调整其大小。

$(objName).draggable({
    start: function (ev, ui) {$(this).css({opacity:0.3})},

    cursor:'move',
    containment: 'parent',
    snap:true,
    stop: function (ev, ui) {
        $(this).css({opacity:1});
        var pos = $(ui.helper).offset();
        console.log($(this).attr("id"));
        console.log(pos.left)
        console.log(pos.top)
    }
})
.resizable({ghost:true,

});

但是如果我开始调整大小，工作区域的边界就无法修复大小。

Answer 1

你需要做的是将大小上的元素以及可拖动区域限制在工作区域中，如此

$(objName).draggable({
    start: function (ev, ui) {$(this).css({opacity:0.3})},

    cursor:'move',
    snap:true,
    drag: function(e, ui){
        var topRightCornerPos_x = $(this).css('left') + $(this).width();
        var bottomLeftConerPos_y = $(this).css('top') + $(this).width();

        if(topRightCornerPos_x > $(this).parent().width()){
            var maxLeft = $(this).parent().width() - $(this).width();
            $(this).css('left', maxLeft);
        }
        if(bottomLeftConerPos_y  > $(this).parent().height()){
            var maxTop = $(this).parent().height() - $9this).height();
            $(this).css('top', maxTop);
        }
    },
    stop: function (ev, ui) {
        $(this).css({opacity:1});
        var pos = $(ui.helper).offset();
        console.log($(this).attr("id"));
        console.log(pos.left)
        console.log(pos.top)
    }
})
.resizable({ghost:true,
    containment: $('#workingarea_id')
});

或者您可以在可调整大小的参数中使用containment: 'parent'

如何停止为可拖动元素Jquery Ui调整大小？

1 个答案: