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

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;
    }
});

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;
    }
});

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!