如何防止Resizable和Draggable元素相互折叠？

Question

大家好.我有以下代码:

http://jsfiddle.net/g7Cgg/

如您所见,有两个简单的DIV堆叠在一起.这些DIV中的每一个也都设置为可调整大小和可拖动.但是,请注意,当您尝试调整第一个元素的大小时,第二个元素会折叠到第一个元素上.从我所看到的,这是因为可调整大小将元素更改为绝对位置.我该如何防止这种行为？是否可以在保留拖动元素的能力的同时调整元素的大小？

另请注意,如果将元素更改为具有相对位置(在.demo样式中添加位置:relative!important),则可以防止折叠,但在开始调整大小或拖动时元素会"跳转".另一种奇怪的行为.谢谢你的帮助.

Answer 1

在我的具体情况下，我做了以下修复：

resizeableObj.resizable({
    start: function(event, ui) {        
        resizeableObj.css({
            position: "relative !important",
            top: "0 !important",
            left: "0 !important"
        });
    },
    stop: function(event, ui) {
        resizeableObj.css({
            position: "",
            top: "",
            left: ""
        });
    }
});

正如你所看到的，在ressized开始事件中，将position设置为relative（通过同时使用draggable和resizing，添加了绝对定位）并将top和left设置为0，以防止你有时看到的“跳跃”。在停止事件中，反转这些更改。适用于我的情况，YMMV。