CSS 変換スケールでの jQuery のドラッグ/サイズ変更の問題を修正する方法?

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

問題: CSS 変換を適用する場合、特に変換: 行列

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

以上がCSS 変換スケールでの jQuery のドラッグ/サイズ変更の問題を修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。