Jquery перетаскиваемый + элемент с изменяемым размером, выходящий за пределы

Элемент, к которому применен изменяемый и перетаскиваемый плагин Jquery, выходит за границы, если родительский элемент не имеет

overflow:hidden;

Применил к нему.

Вот JSfiddle: http://jsfiddle.net/hjtBA/

Попробуйте пару раз перетащить элемент в правый нижний угол. Вы увидите, что он выходит за пределы. Я понял, что если я установлю родительский элемент, например. #outer to overflow:hidden, что проблема решена.

Проблема: мне нужно, чтобы у родителя было overflow:visible, чтобы другие CSS работали нормально. Как еще я могу решить проблему, без создания родительского переполнения: скрытого?

Заранее спасибо!


jquery css jquery-ui jquery-ui-draggable jquery-ui-resizable
person Ilya Karnaukhov    schedule 01.06.2012    source источник
comment
У меня он не выходит за рамки, только при изменении размера в правом нижнем углу.   -  person Hidde    schedule 01.06.2012
comment
Я только что проверил это. В опере нет, а в IE и хроме есть :( Когда он уже в правом нижнем углу и вы перетаскиваете его снова, вот тогда и возникает проблема.   -  person Ilya Karnaukhov    schedule 01.06.2012
comment
Теперь я вижу! Это происходит только в том случае, если размер блока НЕ ​​был изменен. Я изменил его размер, прежде чем перетаскивать... Это только jFiddle или тоже живой?   -  person Hidde    schedule 01.06.2012
comment
если поставить в правый нижний угол. Отпустите кнопку мыши и снова нажмите и перетащите, вы можете перетащить ее примерно на 3 пикселя. Если вы отпустите снова и щелкните и перетащите, он снова переместится примерно на 3 пикселя. Таким образом, вы можете в значительной степени тянуть его, как далеко вы хотите. Может быть, вам следует сообщить о чем-то команде jQuery?   -  person Alfred Larsson    schedule 01.06.2012
comment
Да, я буду. Я бродил, была ли это проблема с моим кодом или это глюк :)   -  person Ilya Karnaukhov    schedule 01.06.2012
comment
Да, я бы также предположил, что это ошибка. Я пытался поставить .resizable() после .draggable(), но это не помогло. +1 тебе :)   -  person Hidde    schedule 01.06.2012

Ответы (2)


arrow_upward
4
arrow_downward

Resizable преобразует элемент в абсолютно позиционированный, поэтому ограничивающая рамка не имеет значения,

Кажется, есть ошибка, из-за которой вы можете перетащить 3 пикселя за пределы ограничивающей рамки, поэтому замените свою скрипку этим кодом, который добавляет функцию привязки 3 пикселя, поэтому вы не можете перетаскивать 3 пикселя за границу :-)

$(function(){
    $('#inner').resizable({
        containment: 'parent'        
        }).draggable({
        containment: 'parent' ,
        snap: "#outer", snapMode: "inner" ,
        snapTolerance: 3       
    });    
});​

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

person webestdesigns    schedule 01.06.2012
comment
Вебестдизайн. Не могли бы вы объяснить свой код? Может быть, включить его в мой JSfiddle? Поскольку я понятия не имею, как это решает мою проблему, спасибо :) - person Ilya Karnaukhov; 01.06.2012
comment
Возможно, вы используете другой браузер, но с хромом он все равно не работает. - person Ilya Karnaukhov; 04.06.2012
comment
Не изменяйте размер элемента и продолжайте перетаскивать его в правый нижний угол. Вы увидите, что проблема не решена :( - person Ilya Karnaukhov; 04.06.2012

arrow_upward
1
arrow_downward

Мое решение для всех, кому оно помогает, рабочий код на скрипке

$('#box-1').draggable({
  grid: [20, 10],
  axis: "x",
  containment: '#container'
  });

http://jsfiddle.net/pjasv3hg/

person Sheran Corera    schedule 14.05.2019