如何防止可调整大小元素和可拖动元素相互折叠? [英] How to prevent Resizable and Draggable elements from collapsing on each other?

问题描述

大家好.我有以下代码:

Hey all. I have the following code:

http://jsfiddle.net/g7Cgg/

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

As you can see, there are 2 simple DIVs that are stacked one above each other. Each of these DIVs are also set to be resizable and draggable. However, notice when you attempt to resize the first element, the second element collapses onto the first. From what I can see, this is because resizable changes the element to a position of absolute. How can I prevent this behavior? Is it possible to resize the element while retaining the ability to drag the element?

还请注意，如果将元素更改为相对位置(在.demo样式中添加position:relative！important)，则可以防止折叠，但是当您开始调整大小时，元素跳"或拖动.另一个怪异的行为.感谢您的帮助.

Note also, that if you change the elements to have a position of relative (add position:relative !important in the .demo style), it sort of prevents the collapsing, but the element "jumps" when you begin to resize or drag. Another weird behavior. Thanks for your help.

推荐答案

在我的具体情况下，我做了以下操作来解决它:

In my specific case, here is what I did to fix it:

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: ""
        });
    }
});

如您所见，在可调整大小的开始事件中，将位置设置为相对(通过一致使用可拖动和可调整大小的位置，添加了绝对位置)，并将顶部和左侧设置为0以防止您跳"有时看到.在停止事件中，撤消这些更改.在我的情况下有效，YMMV.

As you can see, in the resizable start event, set the position to relative (by using draggable and resizable in concert, an absolute positioning is added) and set the top and left to 0 to prevent the "jumping" that you sometimes see. In the stop event, reverse these changes. Works in my case, YMMV.

这篇关于如何防止可调整大小元素和可拖动元素相互折叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！