Как предотвратить изменение размеров элементов Resizable и Draggable друг на друга? - PullRequest
Новая
       38

Как предотвратить изменение размеров элементов Resizable и Draggable друг на друга?

6 голосов
/ 18 мая 2011

Привет всем. У меня есть следующий код:

http://jsfiddle.net/g7Cgg/

Как видите, есть 2 простых DIV, которые расположены друг над другом. Каждый из этих DIV также может быть изменяемого размера и перетаскиваемого. Однако обратите внимание, когда вы пытаетесь изменить размер первого элемента, второй элемент сворачивается в первый. Из того, что я вижу, это потому, что изменяемый размер изменяет элемент на абсолютную позицию. Как я могу предотвратить это поведение? Можно ли изменить размер элемента, сохранив возможность перетаскивания элемента?

Также обратите внимание, что если вы измените элементы, чтобы они имели относительную позицию (добавьте положение: относительная! Важно в стиле .demo), это как бы предотвращает свертывание, но элемент "прыгает", когда вы начинаете изменять размер или перетащите. Еще одно странное поведение. Спасибо за вашу помощь.

Ответы [ 5 ]

4 голосов
/ 01 июня 2011

В моем конкретном случае вот что я сделал, чтобы это исправить: 

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.

2 голосов
/ 10 ноября 2017

Используйте этот код, чтобы удерживать элемент в пространстве окна без прокрутки при перетаскивании:

$("#draggable").draggable({containment:"window", scroll: false})

2 голосов
/ 28 апреля 2014

Нашли более простое решение (которое соответствует моим потребностям);

Внутри jquery-ui.css установите желаемое положение и добавьте! Важное, чтобы убедиться, что оно остается: 

.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */
1 голос
/ 30 марта 2012

Инструменты разработчика Chrome указывают, что пользовательский интерфейс jQuery использует атрибут style="position:relative" во время перетаскивания / изменения размера пользователя.Это заменит любой .demo{position:absolute} в CSS.

Обходной путь - установить свой собственный style="position:absolute" (для этого можно использовать метод jQuery css()), а затем явно установить top и left для каждого div. 

 $('.demo').css({position:"absolute"});
0 голосов
/ 18 мая 2011

Просто установите #container на position: relative;. http://jsfiddle.net/g7Cgg/1/

...