Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/jquery-ui/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 可调整大小在可拖放和可调整大小的div上不起作用_Jquery_Jquery Ui_Drag And Drop_Jquery Ui Droppable_Jquery Ui Resizable - Fatal编程技术网

Jquery 可调整大小在可拖放和可调整大小的div上不起作用

Jquery 可调整大小在可拖放和可调整大小的div上不起作用,jquery,jquery-ui,drag-and-drop,jquery-ui-droppable,jquery-ui-resizable,Jquery,Jquery Ui,Drag And Drop,Jquery Ui Droppable,Jquery Ui Resizable,这一切都很好,现在我的要求改变了,我删除的div.draaa项目也必须调整大小。因此,我将我的项目放入一个可拖放且可调整大小的DIV中 选项containment:'GridDiv'不再起作用,但当GridDiv没有可调整大小时,它就起作用了。因此,当我调整GridDiv的大小时,被删除的元素也应该调整大小,但不能比“GridDiv”大 有人有主意吗?如果您滚动浏览代码,您将理解 $(".draaa").draggable({ helper: 'clone', stop:

这一切都很好,现在我的要求改变了,我删除的div.draaa项目也必须调整大小。因此,我将我的项目放入一个可拖放且可调整大小的DIV中

选项containment:'GridDiv'不再起作用,但当GridDiv没有可调整大小时,它就起作用了。因此,当我调整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”,我不想..

好的,我找到了它不起作用的原因:/

}).resizable({
            //helper: "ui-resizable-helper",
            containment: '#GridDiv',
助手选项使它不发生,为什么?我不知道。因此,我将使用“无助手”选项: