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

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

背景

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

jQuery パッチ ソリューション

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

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

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

サイズ変更可能な修正

<br>$(this).resizable({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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;

}

ログイン後にコピー