CSS Transform Scale を使用した jQuery のドラッグ/サイズ変更

問題: CSS 変換を適用する場合、特に変換: 行列(0.5, 0, 0, 0.5, 0, 0); を div に追加し、子要素で jQuery の draggable() および resizable() プラグインを使用すると、jQuery によって行われた変更はマウスの位置と「同期しなくなります」。

解決策: jQuery プラグインにパッチを適用する

jQuery プラグイン、具体的には $.ui.draggable の _mouseStart メソッドと _generatePosition メソッドにパッチを適用することで解決策が見つかりました。このアプローチは効果的に機能しましたが、元のプラグイン コードを変更する必要がありました。

代替解決策: コールバック ハンドラーを使用する

ただし、プラグイン コードを変更する必要のない、より最適な解決策が発見されました。 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 を使用して、そのコア機能を変更せずに、スケーリングされた要素内のドラッグおよびサイズ変更イベントを処理するクリーンで非侵襲的なソリューションを提供します。