jQuery draggable и -webkit-transform: scale();

У меня есть ситуация, когда внутри div Есть перетаскиваемые предметы. Тем не менее, когда родитель div масштабируется с использованием -webkit-transformперетащить, очевидно, перестает работать должным образом.

Я воспроизвел сценарий здесь.

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

У меня есть шкала (1.5 в примере) как переменная в JS, так что я могу использовать это, но где? Мне нужно разделить расстояние перемещения по шкале, верно? Где я мог это сделать?

Изменить: я попытался установить функцию drag- событие, но не удалось выяснить, как на самом деле изменить расстояние перемещения.

Edit2: я копал исходный код jQuery UI, и кажется, что нет никакого способа сделать это из события drag:

if(this._trigger('drag', event, ui) === false) {
    this._mouseUp({});
    return false;
}

Как видите, возвращаемое значение callback-функции никак не сохраняется. Положение элемента изменяется после срабатывания обратного вызова, поэтому изменение CSS внутри обратного вызова не работает.

Вы можете увидеть соответствующий код здесь, используя поиск в браузере с этой строкой:

_mouseDrag: function(event, noPropagation) {
Источник

3 ответа

Решение

Из-за моего небольшого опыта работы с JavaScript я не осознавал, что обратный вызов может фактически изменить позицию, даже если это не так return что-нибудь. Это связано с тем, что в JS параметры по умолчанию передаются по ссылке.

Вот рабочий код:

// Couldn't figure out a way to use the coordinates
// that jQuery also stores, so let's record our own.
var click = {
    x: 0,
    y: 0
};

$('.draggable').draggable({

    start: function(event) {
        click.x = event.clientX;
        click.y = event.clientY;
    },

    drag: function(event, ui) {

        // This is the parameter for scale()
        var zoom = 1.5;

        var original = ui.originalPosition;

        // jQuery will simply use the same object we alter here
        ui.position = {
            left: (event.clientX - click.x + original.left) / zoom,
            top:  (event.clientY - click.y + original.top ) / zoom
        };

    }

});
Источник

Я знаю, что мой ответ так поздно, эта проблема опубликована 8 лет назад, но я столкнулся с ней только вчера, и я не смог найти никакого решения в Интернете.

Вот мое решение на 

      var element_inside_the_scaled_container = $('#element');

$(element_inside_the_scaled_container).draggable({

    drag: function (event, ui) {

        var constants = normalize_ui_position('#elem_container', UI);

        console.log(constants); // They could be useful!

    }

});

Вызванная мною функция доступна на моем GitHubgithub

Источник

Я думаю, что вам нужен плагин Transformable (http://plugins.jquery.com/project/transformable) jQuery, чтобы "нормализовать" масштабирование WebKit. Тогда перетаскивание будет работать как в Firefox.

Вот плагин - http://flin.org/js/jquery.transformable.js. Я думаю, что это должно решить вашу проблему. Вот моя версия вашего кода: http://jsfiddle.net/vMaXm/4/

$("#parent").setTransform("scalex", 1.5);
//$("#parent").setTransform("scaley", 1.5);
$('.draggable').draggable({ containment: "parent" });

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

Источник
Другие вопросы по тегам