Перетаскивание/изменение размера jQuery с помощью масштабирования преобразования CSS

Проблема: При применении преобразования CSS, в частности, преобразования: матрица (0.5, 0, 0, 0.5, 0, 0); в div и при использовании плагинов jQuery draggable() и resizable() для дочерних элементов изменение, сделанное jQuery, становится «не синхронизированным» с положением мыши.

Решение: исправление плагинов jQuery

Решение было найдено путем исправления плагинов jQuery, в частности методов _mouseStart и _generatePosition из $.ui.draggable. Этот подход работал эффективно, но требовал изменения исходного кода плагина.

Альтернативное решение: использование обработчиков обратного вызова

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

Исправление масштаба преобразования для изменяемого размера:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10, 
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Adjust width and height based on zoom scale
        var changeWidth = ui.size.width - ui.originalSize.width;
        var newWidth = ui.originalSize.width   changeWidth / zoomScale;

        var changeHeight = ui.size.height - ui.originalSize.height;
        var newHeight = ui.originalSize.height   changeHeight / zoomScale;

        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});

Исправление масштаба преобразования для перетаскиваемых объектов:

$(this).draggable({
    handle: '.drag-handle', 
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    }, 
    drag: function(event, ui) {
        // Adjust left and top positions based on zoom scale
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var newLeft = ui.originalPosition.left   changeLeft / (( zoomScale));

        var changeTop = ui.position.top - ui.originalPosition.top;
        var newTop = ui.originalPosition.top   changeTop / zoomScale;

        ui.position.left = newLeft;
        ui.position.top = newTop;
    }
});

Этот подход обеспечивает чистое и неинвазивное решение для обработки событий перетаскивания и изменения размера внутри масштабируемых элементов с использованием jQuery без изменения каких-либо его основных функций.