CSS Transform Scale を使用して jQuery の正しいドラッグ/サイズ変更動作を実現するにはどうすればよいですか?

CSS 変換スケールによる jQuery のドラッグ/サイズ変更の修正

背景

CSS 変換の適用要素を作成し、その子に対して jQuery のドラッグ可能でサイズ変更可能なプラグインを使用すると、マウス カーソルとドラッグまたはサイズ変更された要素との間にずれが生じる可能性があります。これは、要素に適用されるスケール係数が原因です。

jQuery パッチ ソリューション

以前のソリューションでは、jQuery のドラッグ可能およびサイズ変更可能なプラグインにパッチを適用して、マウス オフセットを調整する必要がありました。スケール係数。この方法では、プラグインのソース コードを変更する必要がありました。

代替ソリューション: コールバック ハンドラー

代替ソリューションは、サイズ変更およびドラッグ可能なプラグインによって提供されるコールバック ハンドラーを使用することです。これにより、jQuery にパッチを適用する必要がなくなります。

サイズ変更可能な修正

<br>$(this).resizable({<pre class="brush:php;toolbar:false">minWidth: -(contentElem.width()) * 10,  
minHeight: -(contentElem.height()) * 10,  
resize: function(event, ui) {

    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;

}

});

サイズ変更ハンドラーで、幅と高さの変化を計算し、ズーム スケールの逆数を適用して新しい幅と高さを調整し、

ドラッグ可能な修正

<br>$(this).draggable({<pre class="brush:php;toolbar:false">handle: '.drag-handle',
start: function(event, ui) {
    ui.position.left = 0;
    ui.position.top = 0;
},
drag: function(event, ui) {

    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;

}

});

ドラッグ ハンドラーで、左と上の位置の変化を計算し、ズーム スケールの逆数を適用して新しい左と上の位置を調整し、

結論

コールバック ハンドラーを使用したこの代替ソリューションは、CSS がスケールで変換されるときにドラッグ/サイズ変更の動作を修正する非侵襲的な方法を提供します。適用されました。

以上がCSS Transform Scale を使用して jQuery の正しいドラッグ/サイズ変更動作を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。