Bagaimana untuk Membetulkan Isu Seret/Ubah Saiz jQuery dengan Skala Transformasi CSS?

jQuery Drag/Resize dengan CSS Transform Scale

Masalah: Apabila menggunakan transformasi CSS, khususnya transformasi: matriks (0.5, 0, 0, 0.5, 0, 0);, ke div dan menggunakan pemalam jQuery draggable() dan resizable() pada elemen anak, pengubahan yang dibuat oleh jQuery menjadi "tidak segerak" dengan kedudukan tetikus.

Penyelesaian: Menampal Pemalam jQuery

Penyelesaian ditemui dengan menampal pemalam jQuery, khususnya kaedah _mouseStart dan _generatePosition $.ui.draggable. Pendekatan ini berfungsi dengan berkesan tetapi memerlukan pengubahsuaian kod pemalam asal.

Penyelesaian Alternatif: Menggunakan Pengendali Panggilan Balik

Walau bagaimanapun, penyelesaian yang lebih optimum ditemui yang tidak memerlukan pengubahsuaian pemalam jQuery secara langsung. Dengan menggunakan pengendali panggil balik, adalah mungkin untuk melaraskan kedudukan dan saiz elemen boleh seret dan boleh ubah saiz berdasarkan skala zum semasa.

Pembetulan Skala Transformasi untuk Boleh Diubah:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10, 
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Adjust width and height based on zoom scale
        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;
    }
});

Pembetulan Skala Transformasi untuk Boleh Seret:

$(this).draggable({
    handle: '.drag-handle', 
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    }, 
    drag: function(event, ui) {
        // Adjust left and top positions based on zoom scale
        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;
    }
});

Pendekatan ini menyediakan penyelesaian yang bersih dan tidak invasif untuk mengendalikan peristiwa seret dan ubah saiz dalam elemen berskala menggunakan jQuery tanpa mengubah suai mana-mana daripadanya fungsi teras.

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