jquery seret mendatar untuk memadam

Dengan perkembangan teknologi Internet yang berterusan, permintaan untuk interaktiviti halaman tapak web semakin tinggi dan lebih tinggi Penyeretan dan pemadaman mendatar adalah salah satu senario interaksi yang lebih biasa. Apabila melaksanakan fungsi ini, jQuery ialah alat yang sangat berguna yang boleh membantu kami melaksanakan fungsi ini dengan cepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan jQuery untuk melaksanakan fungsi seret dan padam mendatar.

1. Keperluan fungsian

Sebelum pelaksanaan khusus, mari kita lihat dahulu keperluan fungsian:

1. Apabila tetikus mengklik pada elemen, elemen tersebut perubahan kepada boleh diseret.
2. Apabila tetikus diseret secara mendatar, elemen itu bergerak dengan tetikus.
3. Apabila jarak antara elemen dan tepi kanan halaman mencapai nilai tertentu, elemen itu hilang secara automatik.
4. Semasa proses menyeret, anda boleh memadamkan elemen dengan melepaskan tetikus atau menyeret elemen ke kawasan yang ditentukan.

2. Langkah-langkah pelaksanaan

Dengan mengambil kira keperluan fungsi, pelaksanaan khusus boleh dimulakan. Langkah-langkah khusus adalah seperti berikut:

1 Perkenalkan perpustakaan jQuery

Sebelum melaksanakan fungsi ini, anda perlu memperkenalkan perpustakaan jQuery terlebih dahulu ke dalam halaman HTML. Dalam artikel ini, kami akan memperkenalkan pautan CDN jQuery, kodnya adalah seperti berikut:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Tambah elemen HTML

Tambah elemen yang perlu diseret dan dipadam dalam halaman HTML, kod adalah seperti berikut:

<div class="item">元素1</div>
<div class="item">元素2</div>
<div class="item">元素3</div>
<div class="item">元素4</div>
<div class="item">元素5</div>

Di mana, .item ialah nama kelas yang kami tambahkan pada setiap elemen, yang akan digunakan kemudian.

3. Tambah gaya CSS

Tetapkan gaya yang sepadan untuk setiap elemen Kod adalah seperti berikut:

.item {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    float: left;
    cursor: move;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

Antaranya, lebar, tinggi, warna latar belakang dan. bulatan elemen ditetapkan Sudut, pemusatan teks, jidar kanan, gaya terapung dan tetikus serta sifat berkaitan yang lain, dan kelas clearfix ditambah untuk mengosongkan terapung.

4. Tambah kod interaksi JS

Tambah kod JS yang sepadan untuk merealisasikan fungsi seret dan padam Kod adalah seperti berikut:

$(function () {
    var startX = 0;
    var endX = 0;
    var offsetX = 0;
    var isMoved = false;
 
    // 当鼠标按下时
    $('.item').on('mousedown', function (e) {
        startX = e.clientX;
        $(this).css('cursor', 'grabbing');
        isMoved = false;
    });
 
    // 当鼠标移动时
    $(document).on('mousemove', function (e) {
        if (startX === 0) {
            return;
        }
        endX = e.clientX;
        offsetX = endX - startX;
        $('.item').css('transform', 'translateX(' + offsetX + 'px)');
        if (Math.abs(offsetX) > 10) {
            isMoved = true;
        }
    });
 
    // 当鼠标抬起时
    $(document).on('mouseup', function () {
        $('.item').css('transform', 'translateX(0px)');
        $('.item').css('cursor', 'move');
 
        if (isMoved) {
            if (offsetX > 100) {
                $(this).remove();
            }
        }
        startX = 0;
        endX = 0;
        offsetX = 0;
        isMoved = false;
    });
});

Kod di atas menyedari bahawa apabila. tetikus ditekan, Tambahkan atribut transform yang sepadan pada elemen supaya elemen bergerak dengan tetikus dan tentukan sama ada elemen itu perlu dipadamkan semasa proses menyeret.

3. Nota

Apabila melaksanakan fungsi seret dan padam mendatar, anda perlu memberi perhatian kepada perkara berikut:

1. Tambahkan atribut cursor yang sepadan setiap elemen , supaya gaya tetikus yang sepadan boleh dipaparkan apabila tetikus berada pada elemen.

2. Apabila menggunakan atribut transform, anda perlu menggunakan kernel penyemak imbas tertentu agar serasi dengan penyemak imbas yang berbeza.

3. Pemprosesan anti goncang peristiwa pergerakan tetikus diperlukan untuk mengelakkan lukisan semula yang kerap menyebabkan penyemak imbas menjadi beku.

4. Ringkasan

Melalui langkah di atas, kami berjaya melaksanakan fungsi seret dan padam mendatar menggunakan jQuery. Dalam pembangunan sebenar, anda juga boleh menambah kesan animasi untuk meningkatkan pengalaman interaksi pengguna. Saya harap artikel ini akan membantu anda, dan saya juga berharap anda boleh menggunakan jQuery dan teknologi berkaitannya secara fleksibel dalam pembangunan sebenar masa hadapan untuk mencapai kesan interaktif yang lebih kaya.

Atas ialah kandungan terperinci jquery seret mendatar untuk memadam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!