Question

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

您可以在这里退房： 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选项：

这是小提琴：http://jsfiddle.net/v3W62/1/

这里改变了一行：

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

似乎工作。请尝试一下，如果有帮助请告诉我。）

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

1 个答案: