## Bagaimana untuk Menyelesaikan Percanggahan Seret/Ubah Saiz jQuery dengan Skala Transformasi CSS?

jQuery Drag/Resize dengan CSS Transform Scale

Isu:

Menggunakan transformasi CSS ( termasuk penskalaan matriks) kepada elemen menyebabkan percanggahan dalam menyeret dan mensaiz semula operasi yang dilakukan dengan pemalam draggable() dan resizable() jQuery.

Penyelesaian:

Seorang pengguna mencadangkan tampung yang mengubah suai pemalam jQuery, tetapi penyelesaian ini memerlukan pengeditan fail pemalam.

Pendekatan Alternatif:

Sebagai alternatif, anda boleh mengelak daripada menampal jQuery dengan menggunakan pengendali panggil balik dalam draggable dan konfigurasi boleh ubah saiz. Pendekatan ini melaraskan dimensi dan kedudukan baharu berdasarkan skala zum semasa acara ini.

Kod:

Untuk Boleh Resizable:

<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>

Untuk Boleh Seret:

<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>

Dalam coretan kod ini, zoomScale ialah pembolehubah global yang mewakili skala semasa elemen yang diubah.

Penyelesaian ini menyediakan kaedah tidak mengganggu untuk mengendalikan penyeretan dan saiz semula dalam elemen berskala menggunakan pemalam jQuery.

Atas ialah kandungan terperinci ## Bagaimana untuk Menyelesaikan Percanggahan Seret/Ubah Saiz jQuery dengan Skala Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!