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

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

元の解決策

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

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

改善された解決策

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

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 を変更したり、複雑なパッチ ソリューションを?qū)g裝したりすることなく、ドラッグ可能でサイズ変更可能な要素がスケーリングされた要素內(nèi)で正しく機(jī)能するようになります。

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