jQuery-UI Resizable: масштабирование всех элементов alsoResize пропорционально изменяемому div

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

визуально изменяемый размер элемента является ограничивающим полем для элементов alsoResize.

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

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

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

Я сначала подумал, что это не будет слишком много хлопот, изменив плагин alsoResize. Это то, что я добавил в resize: _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/

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

9
javascript jquery jquery-ui jquery-ui-resizable math

3 ответов

Возможно, вам нужно пересмотреть структуру..

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

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

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

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

  • во-первых, вам нужно использовать начальные размеры / позиции, а не ток элементов, поэтому используйте start.width .height etc..
  • для позиционирования необходимо перевести элемент в начало координат (в отношении расстояния от 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 ;

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

демо на 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/

6

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

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

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

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

0