Cara menggunakan jQuery untuk melaksanakan fungsi seret dan lepas div-Soal Jawab bahagian hadapan-php.cn

Cara menggunakan jQuery untuk melaksanakan fungsi seret dan lepas div

PHPz

Lepaskan： 2023-04-17 14:27:03

asal

2457 orang telah melayarinya

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>

Salin selepas log masuk

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%;
}

Salin selepas log masuk

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){
    // 鼠标抬起时的事件
});

Salin selepas log masuk

(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;

Salin selepas log masuk

(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"
});

Salin selepas log masuk

(4) Dalam acara naik tetikus, kosongkan kedudukan tetikus yang disimpan dan kedudukan elemen seret.

mouseX = 0;
mouseY = 0;
dragX = 0;
dragY = 0;

Salin selepas log masuk

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>

Salin selepas log masuk

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!