Как сделать масштабируемые элементы CSS3 перетаскиваемыми - PullRequest
Новая
       0

Как сделать масштабируемые элементы CSS3 перетаскиваемыми

4 голосов
/ 14 февраля 2011

Я заметил, что атрибут масштаба CSS3 действительно плохо работает с jquery ui, особенно с сортируемым.Проблема в том, что мышь все еще нужно двигать так, как если бы элементы не масштабировались.Посмотрите этот пример jsfiddle .

У кого-нибудь есть мысли, как это исправить?Можно ли изменить скорость движения мыши?Далее я собираюсь посмотреть в html5 native drag and drop и попытаться написать собственную сортируемую функцию.

ОБНОВЛЕНИЕ:

Перетаскиваемый пользовательский интерфейс Jquery хорошо работает с масштабированными элементами CSS3, вот для него 1011 * скрипка

Ответы [ 2 ]

5 голосов
/ 22 февраля 2011

Оказывается, реальный ответ не требует написания специальных функций перемещения. Сортировка Jquery ui может использоваться, если сортируемые элементы упакованы в div соответствующего размера со скрытым переполнением. Проверьте этот jsfiddle для примера.

Проблема заключалась в том, что я заставил масштабированные делители быть ближе друг к другу, используя отрицательное поле. Затем, когда я начал перетаскивать предмет, он занимал неправильное количество места. С масштабированным элементом, завернутым в немасштабированный div, все работает как положено.

3 голосов
/ 22 февраля 2011

У меня нет решения для работы с jquery ui, но у меня есть решение для работы с Raphael и расширением других объектов svg.

Сначала, используя chrome или firefox, перетащите точки в this jsfiddle. Обязательно перетащите обе точки и используйте ползунок внизу, чтобы изменить масштаб поля. Слайдер имеет диапазон шкалы по умолчанию от 0,4 до 1,2. В Chrome слайдер на самом деле является слайдером, но в Firefox он отображается как текстовое поле. Если вы используете Firefox, введите значения, которые в 100 раз превышают масштаб, т. Е. 70 => 0,7.

То, что вы должны были только что испытать, заключается в том, что черная точка отслеживает мышью независимо от масштаба, а красная точка отслеживает только при масштабе 1,0.

Причина этого в том, что две точки используют разные функции onMove. Черная точка перемещается в соответствии со шкалой 1 /, а красная точка движется нормально. 

var moveCorrected = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + (1/scale)*dx, 
      cy: this.oy + (1/scale)*dy
    });
}
var move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + dx, 
      cy: this.oy + dy
    });
}

Итак, в ответ на мой оригинальный вопрос. Вы не можете (и не должны) изменять то, как движется мышь, это явно определенное пользователем поведение, но вы можете изменить функцию перемещения перемещаемого объекта, чтобы отслеживать с помощью мыши.

...