子要素の CSS 変換スケールで jQuery の draggable() および resizable() プラグインを使用するにはどうすればよいですか?

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

この問題は、要素にスケーリングを伴う CSS 変換を適用し、jQuery のドラッグ可能な機能を使用するときに発生します。その要素内の子の () および resizable() プラグイン。問題は、適用されたスケールにより、jQuery ベースの変更がマウスの動きと「同期していない」ように見えることです。

元の解決策

パッチ適用された解決策が見つかりました。 jQuery プラグインの変更を提案した StackOverflow で。具体的には、_mouseStart() 関数と _generatePosition() 関数がスケーリングを考慮して変更されました:

• Monkey-patched _mouseStart() は、適用されるスケールと等しい係数でオフセット値を調整します。
• _generatePosition() では、ドラッグ/サイズ変更された要素が適切に配置されるように、スケール係数に基づいて動きが調整されました。

改善された解決策

その後、jQuery を変更する必要をなくす、より洗練されたソリューションが発見されました。このアプローチには、サイズ変更可能なイベントとドラッグ可能なイベントのコールバック ハンドラーの設定が含まれます:

Resizable:

$(this).resizable({
    // Set very large and negative minWidth and minHeight
    minWidth: -(contentElem.width()) * 10,
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Calculate the change in width and height
        var changeWidth = ui.size.width - ui.originalSize.width;
        var changeHeight = ui.size.height - ui.originalSize.height;

        // Adjust the new width and height by dividing the change by the zoomScale
        var newWidth = ui.originalSize.width + changeWidth / zoomScale;
        var newHeight = ui.originalSize.height + changeHeight / zoomScale;

        // Update the ui.size object with the adjusted values
        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});

Draggable:

$(this).draggable({
    handle: '.drag-handle', // Specify a handle element for dragging
    start: function(event, ui) {
        // Reset the ui.position object to {left: 0, top: 0} at the start of the drag
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {
        // Calculate the change in left and top positions
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var changeTop = ui.position.top - ui.originalPosition.top;

        // Adjust the new left and top positions by dividing the change by the zoomScale
        var newLeft = ui.originalPosition.left + changeLeft / zoomScale;
        var newTop = ui.originalPosition.top + changeTop / zoomScale;

        // Update the ui.position object with the adjusted values
        ui.position.left = newLeft;
        ui.position.top = newTop;
    }
});

これらのコールバック ハンドラーを使用することにより、jQuery を変更したり、複雑なパッチ ソリューションを実装したりすることなく、ドラッグ可能でサイズ変更可能な要素がスケーリングされた要素内で正しく機能するようになります。

以上が子要素の CSS 変換スケールで jQuery の draggable() および resizable() プラグインを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。