Seret/Ubah Saiz jQuery dengan Skala Transformasi CSS

Soalan ini tertumpu pada isu penggunaan pemalam boleh seret dan saiz semula jQuery kepada elemen anak dalam div yang mempunyai transformasi CSS (matriks) digunakan padanya. Masalah timbul apabila elemen kanak-kanak diseret atau diubah saiz, kerana pelarasan yang dibuat oleh jQuery tidak segerak dengan kedudukan tetikus oleh faktor yang sepadan dengan skala yang digunakan.

Penyelesaian

Selepas beberapa percubaan, pengguna menemui penyelesaian yang melibatkan menampal pemalam yang boleh diseret dan boleh diubah saiz jQuery. Berikut ialah ringkasan kod yang ditampal:

• Monkey Patching mouseStart(): Tampalan ini memastikan bahawa kedudukan elemen pembantu dikira dengan betul dengan melaraskan offset tetikus berdasarkan skala transformasi elemen.
• getViewOffset(): Fungsi ini membantu dalam mengira dengan betul offset elemen di bawah transformasi yang digunakan.

Seret/Ubah Saiz jQuery Patch

Kod berikut menunjukkan pengubahsuaian pada fungsi mouseStart() dan generatePosition() dalam pemalam boleh seret jQuery UI:

function monkeyPatch_mouseStart() {

  // Monkey patch mouseStart function

  $.ui.draggable.prototype._mouseStart = function(event) {
    
    // Calculate adjusted offset
    this.offset = this.positionAbs = getViewOffset(this.element[0]);
  }

}

function generatePosition(event) {

  // Calculate adjusted position
  this.top = (
    pageY                               // Absolute mouse position
    - this.offset.click.top                         // Click offset
    - this.offset.relative.top                        // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( this.scrollParent.scrollTop() ) ))
  );

  this.left = (
    pageX                                // Absolute mouse position
    - this.offset.click.left                        // Click offset
    - this.offset.relative.left                       // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : this.scrollParent.scrollLeft() ))
  );
}

Alternatif kepada jQuery

Bagi mereka yang mencari alternatif kepada jQuery untuk mengendalikan fungsi seret dan ubah saiz, berikut ialah beberapa pilihan untuk dipertimbangkan:

• Vanilla JavaScript: Anda boleh melaksanakan fungsi seret dan lepas menggunakan acara JavaScript asli.
• React.js: React menyediakan satu set cangkuk seperti useDrag dan useResize untuk mengurus interaksi ini.
• Vue.js: Vuex menyokong drag -dan-lepaskan interaksi melalui cangkuk useDrag().

Penambahbaikan Selanjutnya

Pengguna juga menyediakan penyelesaian yang melibatkan pengendali panggil balik dalam pemalam jQuery. Kaedah ini tidak memerlukan menampal kod pemalam dan menggunakan faktor skala untuk melaraskan lebar, ketinggian dan kedudukan semasa operasi seret dan ubah saiz.

// Resizable callback handler
$(this).resizable({
    ...
    resize: function(event, ui) {
        // Adjust width and height relative to scale
        ui.size.width = ui.originalSize.width + (ui.size.width - ui.originalSize.width) / zoomScale;
        ui.size.height = ui.originalSize.height + (ui.size.height - ui.originalSize.height) / zoomScale;
    }
});

// Draggable callback handler
$(this).draggable({
    ...
    drag: function(event, ui) {
        // Adjust position relative to scale
        ui.position.left = ui.originalPosition.left + (ui.position.left - ui.originalPosition.left) / zoomScale;
        ui.position.top = ui.originalPosition.top + (ui.position.top - ui.originalPosition.top) / zoomScale;
    }
});

Kaedah alternatif ini ialah penyelesaian yang mudah untuk mengurus acara seret dan ubah saiz. dalam elemen dengan skala transformasi yang digunakan tanpa mengubah suai pemalam jQuery itu sendiri.

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