Bagaimanakah anda mengesan perlanggaran antara elemen jQuery ``?-tutorial js-php.cn

How do you detect collisions between jQuery `` elements?

Pengesanan Perlanggaran antara Elemen Div jQuery

Mengesan perlanggaran antara elemen ialah tugas asas dalam banyak aplikasi web. Dalam kes ini, objektifnya adalah untuk menentukan sama ada dua

elemen, diwakili sebagai kotak berwarna, telah berlanggar semasa bergerak secara berserenjang antara satu sama lain.

Satu pendekatan berkesan untuk menangani masalah ini ialah memanfaatkan fungsi tindih yang disediakan di bawah:

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

Salin selepas log masuk

Fungsi ini mengambil masa dua

elemen sebagai parameter dan mengembalikan nilai boolean yang menunjukkan sama ada ia bertindih berdasarkan kedudukan dan dimensinya. Fungsi ini mula-mula mendapatkan semula kedudukan dan saiz setiap elemen dan kemudian membandingkan julatnya di sepanjang paksi-x dan paksi-y. Ia kembali benar jika terdapat pertindihan dalam mana-mana arah.

Untuk menunjukkan penggunaan fungsi ini, anda boleh mencipta set

elemen dalam dokumen HTML anda, gayakannya sebagai kotak dan berikan mereka ID unik untuk pengenalan. Kemudian, dalam skrip jQuery, anda boleh menggunakan fungsi tindih untuk menyemak perlanggaran antara kotak ini. Kod berikut memberikan contoh:

$(function () {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;
    
    html = $( area ).children().not( box ).map( function ( i ) {
        return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';
    }).get().join( '' );

    $( 'body' ).append( html );
});

Salin selepas log masuk

Dalam contoh ini, kotak merah bernama "Kotak merah" dicipta dan dialihkan menggunakan tetikus. Beberapa kotak lain yang berlabel "Kotak 1" hingga "Kotak 4" diletakkan di lokasi berbeza dalam div "kawasan". Skrip jQuery menyemak perlanggaran antara "Kotak Merah" dan setiap kotak lain dan memaparkan keputusan dalam satu siri

elemen.

Dengan menggunakan fungsi tindih, anda boleh melaksanakan pengesanan perlanggaran dengan berkesan untuk jQuery

elemen, membolehkan interaksi dinamik dan pengendalian perlanggaran masa nyata dalam aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah anda mengesan perlanggaran antara elemen jQuery ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Anda Boleh Mengekalkan Pembolehubah JavaScript Merentasi Berbilang Halaman Web? Artikel seterusnya：Cara menggunakan express-validator sebagai middleware dalam Apl Express

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2261

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2396

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2010

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...