Bagaimana untuk Mencapai Gelagat Seret/Ubah Saiz jQuery yang Betul dengan Skala Transformasi CSS?

Membetulkan Seret/Ubah Saiz jQuery dengan Skala Transformasi CSS

Latar Belakang

Menggunakan transformasi CSS ke elemen dan kemudian menggunakan pemalam boleh seret dan boleh diubah saiz jQuery pada anak-anaknya boleh memperkenalkan salah jajaran antara kursor tetikus dan elemen yang diseret atau diubah saiz. Ini disebabkan oleh faktor skala yang digunakan pada elemen.

Penyelesaian Tampalan jQuery

Penyelesaian sebelumnya melibatkan menampal pemalam jQuery yang boleh diseret dan boleh diubah saiz untuk melaraskan tetikus yang diimbangi oleh faktor skala. Kaedah ini memerlukan pengubahsuaian kod sumber pemalam.

Penyelesaian Alternatif: Pengendali Panggilan Balik

Penyelesaian alternatif ialah menggunakan pengendali panggil balik yang disediakan oleh pemalam boleh ubah saiz dan boleh seret. Ini menghapuskan keperluan untuk menampal jQuery.

Resizable Fix

<br>$(this).resizable({</p>
<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;

}

});

Dalam pengendali ubah saiz, kirakan perubahan dalam lebar dan tinggi, gunakan songsangan skala zum untuk melaraskan lebar dan tinggi baharu, dan kemas kini ui.saiz objek sewajarnya.

Pembetulan Boleh Seret

$(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;

}

});

Dalam pengendali seret, kirakan perubahan dalam kedudukan kiri dan atas, gunakan songsangan skala zum untuk melaraskan kedudukan kiri dan atas baharu, dan kemas kini ui.posisi objek sewajarnya.

Kesimpulan

Penyelesaian alternatif menggunakan pengendali panggil balik ini menyediakan cara tidak invasif untuk membetulkan gelagat seret/ubah saiz apabila CSS berubah dengan skala adalah digunakan.

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