Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Cara menggunakan jQuery untuk melaksanakan fungsi seret dan lepas div
Cara menggunakan jQuery untuk melaksanakan fungsi seret dan lepas div
- PHPzasal
- 2023-04-17 14:17:222501semak imbas
1. Kata Pengantar
Dalam pembangunan bahagian hadapan, fungsi drag-and-drop ialah kaedah interaksi yang sangat biasa, dan kaedah pelaksanaannya agak mudah, selalunya dilaksanakan melalui rangka kerja bahagian hadapan seperti jQuery . Artikel ini akan memperkenalkan secara terperinci cara menggunakan jQuery untuk melaksanakan fungsi seret dan lepas div.
2. Langkah pelaksanaan
- Struktur HTML
Pertama sekali, struktur yang sepadan perlu diwujudkan dalam HTML, iaitu div seret elemen perlu dilaksanakan Secara amnya, adalah disyorkan untuk menggunakan kedudukan mutlak untuk meletakkannya di kawasan yang lebih kecil.
<div class="box"> <div class="drag"></div> </div>
- Gaya CSS
Kedua, gunakan CSS untuk menetapkan gaya elemen seret, seperti menetapkan lebar, ketinggian, warna latar belakang, sempadan dan lain-lain atribut div.
.box {
position: relative;
width: 500px;
height: 500px;
background-color: #f2f2f2;
border: 1px solid #dcdcdc;
}
.drag {
position: absolute;
width: 50px;
height: 50px;
background-color: #29b6f6;
border-radius: 50%;
}
- Kod JS
Akhir sekali, fungsi seret dilaksanakan melalui jQuery atau kod JS asli. Langkah pelaksanaan khusus adalah seperti berikut:
(1) Ikat acara tetikus ke bawah, gerakkan acara dan acara tetikus ke atas ke elemen seret.
$('.drag').mousedown(function(e){
// 鼠标按下时的事件
}).mousemove(function(e){
// 鼠标移动时的事件
}).mouseup(function(e){
// 鼠标抬起时的事件
});
(2) Dalam acara tetikus turun, simpan kedudukan elemen yang sedang diseret dan kedudukan tetikus.
var box = $(".box");
var drag = $(".drag");
// 拖动元素的位置
var dragX = drag.offset().left - box.offset().left;
var dragY = drag.offset().top - box.offset().top;
// 鼠标的位置
var mouseX = e.pageX;
var mouseY = e.pageY;
(3) Dalam acara pergerakan tetikus, hitung jarak yang perlu digerakkan oleh elemen yang diseret dan seret elemen dengan menukar nilai kiri dan atas unsur yang diseret.
var moveX = e.pageX - mouseX;
var moveY = e.pageY - mouseY;
drag.css({
left: dragX + moveX + "px",
top: dragY + moveY + "px"
});
(4) Dalam acara naik tetikus, kosongkan kedudukan tetikus yang disimpan dan kedudukan elemen seret.
mouseX = 0; mouseY = 0; dragX = 0; dragY = 0;
3. Kod lengkap
<!DOCTYPE html>
<html>
<head>
<title>jQuery拖动实例</title>
<meta charset="utf-8">
<style type="text/css">
.box {
position: relative;
width: 500px;
height: 500px;
background-color: #f2f2f2;
border: 1px solid #dcdcdc;
}
.drag {
position: absolute;
width: 50px;
height: 50px;
background-color: #29b6f6;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="drag"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
var box = $(".box");
var drag = $(".drag");
var dragX = 0;
var dragY = 0;
var mouseX = 0;
var mouseY = 0;
drag.mousedown(function(e){
dragX = drag.offset().left - box.offset().left;
dragY = drag.offset().top - box.offset().top;
mouseX = e.pageX;
mouseY = e.pageY;
}).mousemove(function(e){
if(mouseX === 0 || mouseY === 0 || dragX === 0 || dragY === 0) {
return;
}
var moveX = e.pageX - mouseX;
var moveY = e.pageY - mouseY;
drag.css({
left: dragX + moveX + "px",
top: dragY + moveY + "px"
});
}).mouseup(function(e){
mouseX = 0;
mouseY = 0;
dragX = 0;
dragY = 0;
});
</script>
</body>
</html>
4. Ringkasan
Artikel ini terutamanya memperkenalkan cara menggunakan jQuery untuk merealisasikan fungsi penyeretan elemen div melalui HTML dan CSS Interaksi dengan JS merealisasikan kesan interaktif ini dengan mudah dan mudah. Saya harap ia akan membantu pembangun bahagian hadapan.
Atas ialah kandungan terperinci Cara menggunakan jQuery untuk melaksanakan fungsi seret dan lepas div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!