Resizable 不适用于可放置和可调整大小的 div答案

【问题标题】：Resizable wont work on a div that is Droppable and ResizableResizable 不适用于可放置和可调整大小的 div
【发布时间】：2015-03-27 14:16:32
【问题描述】：

一切正常，现在我的要求发生了变化，我删除 .draaa 项目的 div 也必须可调整大小。所以我将我的项目放在一个可放置且可调整大小的 DIV 中。

选项包含：'#GridDiv' 不再起作用，但当#GridDiv dident 具有可调整大小时它起作用。因此，当我调整 GridDiv 的大小时，删除的元素也应该调整大小，但不会变大 '#GridDiv'。

有人有想法吗？如果您滚动浏览代码，您将理解。

    $(".draaa").draggable({
    helper: 'clone',
    stop: function(ui, event){
        var stop = $(this).position();
        $(this).attr('data-component-x', stop.left);
        $(this).attr('data-component-y', stop.top);
        }
    });

     $('#GridDiv').resizable();

    $("#GridDiv").droppable({
    accept: '.draaa',
    drop: function(event, ui) {
        i ++;
        var getClone = $(ui.draggable).clone();
        getClone.attr("id",i+"_"+getClone.attr('id'));
        var hela_cid =getClone.attr("id");
        var deladcid = hela_cid.split("_");
        var cid = deladcid[2];
        var stop = $(getClone).position();
        var widthpx = getClone.css('width');
        var heightpx = getClone.css('height');
        var width = parseInt(widthpx, 10);
        var height = parseInt(heightpx, 10);

        var draggableDocumentOffset = ui.helper.offset();
        var droppableDocumentOffset = $(this).offset();
        var left = draggableDocumentOffset.left - droppableDocumentOffset.left;
        var top = draggableDocumentOffset.top - droppableDocumentOffset.top;
        getClone.css("left",left);
        getClone.css("top", top);
        getClone.css("position", "absolute");


        $(this).append(getClone);

        $("#GridDiv .draaa").addClass("item");

        $(".item").removeClass("ui-draggable draaa");
        $(".item").draggable({
            containment: '#GridDiv',
            //grid: [10,10],
            stop: function(ui, event){

            var stop = $(this).position();
            $(this).attr('data-component-x', stop.left);
            $(this).attr('data-component-y', stop.top);
        },
        }).resizable({

            helper: "ui-resizable-helper",

这项工作
//包含：'#GridDiv'，

            //maxHeight: parseInt(MaxHeight),
            //maxHeight: 300,

            stop: function(event, ui) {
                var width = ui.size.width;
                var height = ui.size.height;
                $('#'+hela_cid).attr('data-component-width', width);
                $('#'+hela_cid).attr('data-component-height', height);
                }
        });


    }

});

该行已被注释掉。因此，我可以将 .draaa 组件调整为大于父级 '#GridDiv' 的大小，但我不想......

【问题讨论】：

标签： jquery jquery-ui drag-and-drop jquery-ui-droppable jquery-ui-resizable

【解决方案1】：

好的，我发现它为什么不起作用：/

}).resizable({
            //helper: "ui-resizable-helper",
            containment: '#GridDiv',

辅助选项使它没有发生，为什么？我不知道。所以我会选择没有帮助选项:)

【讨论】：