Изменяемый размер jQuery-UI: масштабируйте все элементы такжеРазмер пропорционально с изменяемым размером div

Question

У меня есть изменяемый размер div, который расположен над набором элементов, которые были установлены также в Resize.

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

Я хочу иметь возможность изменять размеры элементов tooResize пропорционально размеру div. Поведение пользовательского интерфейса по умолчанию заставляет каждый элемент иметь фиксированную левую и верхнюю позиции при изменении размера:

http://jsfiddle.net/digitaloutback/SrPhA/2/

Но я хочу настроить левую и верхнюю части каждого элемента AR для масштабирования с помощью ограничительной рамки по мере ее изменения.

Сначала я подумал, что это не будет слишком хлопотно, изменив плагин Кроме того. Это то, что я добавил к изменению размера: _alsoResize:

// Get the multipliers
var scaleX = self.size.width / os.width;
var scaleY = self.size.height / os.height;

newElW = ( parseInt(el.css('width')) * scaleX );
newElH = ( parseInt(el.css('height')) * scaleY );
newElL = ( parseInt(el.css('left')) * scaleX );
newElT = ( parseInt(el.css('top')) * scaleY );

el.css({ width: newElW, height: newElH, left: newElL, top: newElT });

Как вы увидите, ящики несколько запаздывают:

http://jsfiddle.net/digitaloutback/SrPhA/4/

Что-то, кажется, раздувает цифры и не может понять это, любые предложения приветствуются. Возможно расхождение десятичных знаков между скриптами и браузером?

Answer 1

Может быть, вам нужно переосмыслить структуру ..

Вы можете вставить элементы .lyr внутри элемента .resizer и расположить их внутри него с процентным положением. Таким образом, они будут автоматически изменять размер, пока их контейнер меняет размер. ( плагин не должен обрабатывать их )

демо на http://jsfiddle.net/SrPhA/65/

---

Обновление после комментария

Чтобы отсоединить элементы resizer от alsoResize элементов, вам нужно принять во внимание несколько вещей для расчетов.

• Во-первых, вам нужно использовать начальные размеры / позиции, а не ток элементов, поэтому используйте start.width .height и т. Д.
• для позиционирования вам нужно перевести элемент в начало координат ( в отношении расстояния от resizer), масштабировать влево / вверх и затем перевести обратно туда, где они были ..

окончательные расчеты становятся

newElW = start.width * scaleX;
newElH = start.height * scaleY;
newElL = ((start.left - op.left) * scaleX) + op.left;
newElT = ((start.top  - op.top ) * scaleY) + op.top ;

Нужно еще немного поработать, чтобы обработать случай, когда вы масштабировали элементы, перетаскивая верхнюю или левую сторону изменяющего размера.

демо на http://jsfiddle.net/gaby/SrPhA/171/

---

Последнее обновление

для масштабирования во всех направлениях используйте эти помощники.

utils: {
        west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left},
        east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;},
        south: function(start, op, scale, delta){return ((start.top  - op.top ) * scale) + op.top; },
        north: function(start, op, scale, delta){return ((start.top  - op.top ) * scale) + op.top + delta.top; }
    }

Рабочий пример со всеми обновлениями на http://jsfiddle.net/gaby/SrPhA/324/

Answer 2

Мне немного повезло, установив margin-top и margin-left для позиционирования и оставив атрибуты top и left по умолчанию для анимации.

http://jsfiddle.net/SrPhA/97/

Answer 3

Вы хотели использовать + вместо *?

newElW = (parseInt(el.css('width')) + scaleX);
newElH = (parseInt(el.css('height')) + scaleY);
newElL = (parseInt(el.css('left')) + scaleX);
newElT = (parseInt(el.css('top')) + scaleY);