Rumah > hujung hadapan web > tutorial css > Bagaimana untuk menggunakan pemalam draggable() dan resizable() jQuery dengan skala transformasi CSS pada elemen kanak-kanak?

Bagaimana untuk menggunakan pemalam draggable() dan resizable() jQuery dengan skala transformasi CSS pada elemen kanak-kanak?

Barbara Streisand
Lepaskan: 2024-10-27 10:51:30
asal
502 orang telah melayarinya

How to use jQuery's draggable() and resizable() plugins with CSS transform scale on child elements?

jQuery Drag/Resize dengan CSS Transform Scale

Isu ini timbul apabila menggunakan transformasi CSS dengan penskalaan kepada elemen dan kemudian menggunakan jQuery's draggable () dan resizable() pemalam pada kanak-kanak dalam elemen itu. Masalahnya ialah pengubahan berasaskan jQuery kelihatan "tidak segerak" dengan pergerakan tetikus disebabkan skala yang digunakan.

Penyelesaian Asal

Penyelesaian yang ditampal ditemui pada StackOverflow yang mencadangkan mengubah suai pemalam jQuery. Khususnya, fungsi _mouseStart() dan _generatePosition() telah diubah untuk mengambil kira penskalaan:

  • Monyet-tatched _mouseStart() untuk melaraskan nilai offset dengan faktor yang sama dengan skala yang digunakan.
  • Dalam _generatePosition(), pergerakan telah dilaraskan berdasarkan faktor skala untuk memastikan penjajaran yang betul bagi elemen yang diseret/disaiz semula.

Penyelesaian yang Diperbaiki

Seterusnya, penyelesaian yang lebih elegan telah ditemui yang menghapuskan keperluan untuk mengubah suai jQuery. Pendekatan ini melibatkan penetapan pengendali panggil balik untuk acara boleh ubah saiz dan boleh seret:

Boleh saiz semula:

$(this).resizable({
    // Set very large and negative minWidth and minHeight
    minWidth: -(contentElem.width()) * 10,
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Calculate the change in width and height
        var changeWidth = ui.size.width - ui.originalSize.width;
        var changeHeight = ui.size.height - ui.originalSize.height;

        // Adjust the new width and height by dividing the change by the zoomScale
        var newWidth = ui.originalSize.width + changeWidth / zoomScale;
        var newHeight = ui.originalSize.height + changeHeight / zoomScale;

        // Update the ui.size object with the adjusted values
        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});
Salin selepas log masuk

Boleh Seret:

$(this).draggable({
    handle: '.drag-handle', // Specify a handle element for dragging
    start: function(event, ui) {
        // Reset the ui.position object to {left: 0, top: 0} at the start of the drag
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {
        // Calculate the change in left and top positions
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var changeTop = ui.position.top - ui.originalPosition.top;

        // Adjust the new left and top positions by dividing the change by the zoomScale
        var newLeft = ui.originalPosition.left + changeLeft / zoomScale;
        var newTop = ui.originalPosition.top + changeTop / zoomScale;

        // Update the ui.position object with the adjusted values
        ui.position.left = newLeft;
        ui.position.top = newTop;
    }
});
Salin selepas log masuk

Dengan menggunakan pengendali panggil balik ini, elemen boleh seret dan boleh ubah saiz kini akan berfungsi dengan betul dalam elemen berskala tanpa perlu mengubah suai jQuery atau melaksanakan penyelesaian tampalan yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan pemalam draggable() dan resizable() jQuery dengan skala transformasi CSS pada elemen kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan