jquery-ui 调整一个元素的大小会影响其他元素

Question

我有一个工具栏，其中包含可拖动的 3 个图像和一个页面字段，您可以将这些图像拖放到其中。我打算将无限元素从工具栏拖放到页面字段并根据需要调整它们的大小。如果我将 3 个或更多元素从“工具栏”拖放到“页面字段”并尝试调整它们的大小，则拖动的元素表现得很奇怪(跳到任何地方或以某种方式消失)。

您可以在这里 checkout : http://jsfiddle.net/v3W62/

$(function () {
                $(".toolbar li").draggable({
                    helper: "clone",
                    revert: "invalid",
                    grid: [20, 20]
                });
                $(".page").droppable({
                    accept: ".toolbar li",
                    drop: function (event, ui) {
                        $("<div style='background:black; position:absolute'><img></img></div>").draggable({ 
                            cursor: "move", grid: [20, 20], containment: "parent" 
                        }).resizable({
                            containment: "parent", handles: "n, w, e, s, es", grid: 20      
                        }).height(100).width(100).appendTo(".page");
                    }
                })
            });

例如:
1-尝试将一张图片添加到黄页中。
2-将该图像拖到黄页底部。
3-尝试重新调整该图像的大小。

Answer 1

好的，现在我明白了。我删除了包含选项并添加了 maxWidth 和 maxHeight 选项:

这是 fiddle :http://jsfiddle.net/v3W62/1/

此处更改的行:

//containment: "parent", 
maxHeight: $('.ui-droppable').height(),
maxWidth: $('.ui-droppable').width(),

似乎有效。请尝试一下，如果有帮助请告诉我:)