Rumah > Artikel > hujung hadapan web > jquery melaksanakan seret dan lepas
jquery melaksanakan seret dan lepas
- PHPzasal
- 2023-05-25 10:07:071315semak imbas
Dengan populariti halaman web moden, elemen boleh seret yang berinteraksi dengan pengguna telah menjadi bahagian yang sangat diperlukan dalam reka bentuk. JQuery ialah perpustakaan JavaScript yang sangat popular yang memudahkan banyak operasi biasa dalam pembangunan. Salah satu cirinya ialah pelaksanaan elemen boleh seret. Dalam artikel ini, kita akan belajar cara melaksanakan elemen boleh seret menggunakan JQuery.
1. Cipta HTML dan CSS
Sebelum kami mula menulis kod JQuery, kami memerlukan halaman HTML untuk melaksanakan elemen boleh seret. Kami akan mencipta reka letak HTML yang mudah dengan elemen boleh seret dan beberapa gaya CSS asas. Berikut ialah kod HTML dan CSS kami:
<!DOCTYPE html>
<html>
<head>
<title>可拖拽实例</title>
<style type="text/css">
.draggable {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div class="draggable">可拖拽元素</div>
</body>
</html>Dalam kod kami, kami telah mencipta halaman HTML ringkas yang mengandungi elemen boleh seret. Gaya CSS kami mentakrifkan gaya elemen boleh seret kami, termasuk lebar, ketinggian, warna, kedudukan, dll.
2. Import perpustakaan JQuery
Seterusnya, kita perlu memperkenalkan perpustakaan JQuery. Anda boleh memuat turun fail perpustakaan terkini dari laman web rasmi JQuery dan meletakkannya dalam projek anda sendiri. Sebagai alternatif, anda boleh menggunakan pautan CDN JQuery. Tambahkan kod berikut pada kod kami:
<!DOCTYPE html>
<html>
<head>
<title>可拖拽实例</title>
<style type="text/css">
.draggable {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="draggable">可拖拽元素</div>
</body>
</html>Dalam kod kami, kami telah menambah pautan CDN untuk JQuery yang boleh kami gunakan untuk contoh kami.
3. Tulis kod JQuery
Sekarang, kita akan mula menulis kod JQuery untuk melaksanakan fungsi elemen boleh seret. Teras JQuery ialah pemilih dan acara. Dalam contoh kami, kami akan menggunakan acara .mousemove() dan kaedah .css().
<!DOCTYPE html>
<html>
<head>
<title>可拖拽实例</title>
<style type="text/css">
.draggable {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
var x = 0;
var y = 0;
var dragging = false;
var element;
$(".draggable").mousedown(function(e) {
element = $(this);
x = e.pageX - element.offset().left;
y = e.pageY - element.offset().top;
dragging = true;
});
$(document).mouseup(function() {
dragging = false;
});
$(document).mousemove(function(e) {
if (dragging) {
element.css({
top: e.pageY - y,
left: e.pageX - x
});
}
});
});
</script>
</head>
<body>
<div class="draggable">可拖拽元素</div>
</body>
</html>Dalam kod kami, kami menggunakan $(document).ready() untuk menunjukkan bahawa halaman dimuatkan dan kod JQuery boleh dilaksanakan.
Kami mula-mula mentakrifkan empat pembolehubah: x dan y menyimpan jarak antara penuding tetikus dan penjuru kiri sebelah atas elemen, menyeret digunakan untuk mengesan sama ada elemen sedang diseret dan elemen digunakan untuk menyimpan unsur yang diseret.
Kami menggunakan $(".draggable").mousedown() untuk mengikat acara mousedown pada elemen kami. Apabila pengguna mengklik pada elemen dan menekan tetikus, jarak antara penunjuk tetikus dan elemen direkodkan dan pembolehubah seret ditetapkan kepada benar.
Kami menggunakan $(document).mouseup() untuk mengikat acara mouseup untuk mengesan apabila pengguna melepaskan butang tetikus. Dalam kes ini, pembolehubah seret ditetapkan kepada palsu.
Akhir sekali, kami menggunakan $(document).mousemove() untuk mengikat acara mousemove untuk mengesan pergerakan tetikus. Jika elemen sedang diseret (menyeret = benar), kaedah .css() akan digunakan untuk menetapkan nilai atas dan kiri elemen untuk mengalihkan elemen di bawah penuding tetikus.
4. Kesan ujian
Kini, kami boleh menjalankan kod kami dalam penyemak imbas. Jika semuanya berfungsi dengan betul, kita sepatutnya boleh mengklik dan menyeret elemen boleh seret kita.
Semasa ujian, anda mungkin perlu melaraskan nilai tertentu dalam kod anda untuk menjadikan elemen boleh seret anda berfungsi dengan lebih baik. Anda juga mungkin boleh menambah gaya dan atribut tambahan untuk menyesuaikan elemen anda agar sesuai dengan keperluan projek anda.
Ringkasan:
Dalam artikel ini, kami mempelajari cara menggunakan JQuery untuk melaksanakan elemen boleh seret. Kami menulis beberapa kod HTML dan CSS mudah dan menambah perpustakaan JQuery. Kami menggunakan peristiwa .mousedown(), .mouseup() dan .mousemove() dan kaedah .css() untuk melaksanakan fungsi drag-and-drop.
Apabila anda menggunakan JQuery untuk melaksanakan elemen boleh seret dalam projek anda sendiri, anda boleh menggunakan kod sampel yang disediakan dalam artikel ini sebagai titik permulaan dan menyesuaikannya mengikut keperluan anda. Sentiasa ingatkan kebolehbacaan, kebolehselenggaraan dan kemudahan penggunaan.
Atas ialah kandungan terperinci jquery melaksanakan seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!