## CSS 変換スケールによる jQuery のドラッグ/サイズ変更の不一致を解決するにはどうすればよいですか?

CSS 変換スケールを使用した jQuery のドラッグ/サイズ変更

問題:

CSS 変換の適用 (行列のスケーリングを含む) を要素に適用すると、jQuery の draggable() および resizable() プラグインで実行されるドラッグとサイズ変更の操作に不一致が発生します。

解決策:

ユーザーがパッチを提案しましたこれは jQuery プラグインを変更しましたが、この解決策にはプラグイン ファイルの編集が必要でした。

代替アプローチ:

あるいは、ドラッグ可能ファイル内のコールバック ハンドラーを使用して、jQuery へのパッチ適用を回避できます。サイズ変更可能な構成。このアプローチでは、これらのイベント中のズーム スケールに基づいて新しい寸法と位置を調整します。

コード:

サイズ変更可能の場合:

<code class="js">$(this).resizable({
  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;
  }
});</code>

ドラッグ可能の場合:

<code class="js">$(this).draggable({
  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;
  }
});</code>

これらのコード スニペットでは、zoomScale は、変換された要素の現在のスケールを表すグローバル変数です。

このソリューションjQuery のプラグインを使用して、スケーリングされた要素内のドラッグとサイズ変更を処理する非侵入的な方法を提供します。

以上が## CSS 変換スケールによる jQuery のドラッグ/サイズ変更の不一致を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。