jQuery를 사용하여 div의 드래그 앤 드롭 기능을 구현하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jQuery를 사용하여 div의 드래그 앤 드롭 기능을 구현하는 방법

PHPz

Apr 17, 2023 pm 02:17 PM

1. 소개

프런트 엔드 개발에서 드래그 앤 드롭 기능은 매우 일반적인 상호 작용 방법이며 구현 방법이 비교적 간단하여 jQuery와 같은 프런트 엔드 프레임워크를 통해 구현되는 경우가 많습니다. 이번 글에서는 jQuery를 사용하여 div의 드래그 앤 드롭 기능을 구현하는 방법을 자세히 소개합니다.

2. 구현 단계

HTML 구조

먼저 HTML에서 해당 구조를 설정해야 합니다. 즉, 드래그된 div 요소를 구현해야 합니다. 일반적으로 절대 위치 지정을 사용하는 것이 좋습니다. 해당 지역의 더 작은 곳에 배치합니다.

<div class="box">
    <div class="drag"></div>
</div>

로그인 후 복사

CSS 스타일

둘째, CSS를 사용하여 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%;
}

로그인 후 복사

JS code

마지막으로 jQuery 또는 네이티브 JS 코드를 통해 드래그 기능을 구현합니다. 구체적인 구현 단계는 다음과 같습니다.

(1) 마우스 다운 이벤트, 이동 이벤트 및 마우스 업 이벤트를 드래그 요소에 바인딩합니다.

$('.drag').mousedown(function(e){
    // 鼠标按下时的事件
}).mousemove(function(e){
    // 鼠标移动时的事件
}).mouseup(function(e){
    // 鼠标抬起时的事件
});

로그인 후 복사

(2) 마우스 다운 이벤트에서 현재 드래그된 요소의 위치와 마우스의 위치를 저장합니다.

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) 마우스 이동 이벤트에서 드래그된 요소가 이동해야 하는 거리를 계산하고, 드래그된 요소의 왼쪽 및 위쪽 값을 변경하여 요소의 드래그를 구현합니다.

var moveX = e.pageX - mouseX;
var moveY = e.pageY - mouseY;

drag.css({
    left: dragX + moveX + "px",
    top: dragY + moveY + "px"
});

로그인 후 복사

(4) 마우스업 이벤트에서는 저장된 마우스 위치와 드래그된 요소 위치를 지웁니다.

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

로그인 후 복사

3. 전체 코드

<!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. 요약

이 글에서는 주로 jQuery를 사용하여 div 요소의 드래그 기능을 구현하는 방법을 소개합니다. HTML, CSS 및 JS의 협력을 통해 이러한 대화형 효과를 쉽고 이해하기 쉽게 구현합니다. . 프론트엔드 개발자들에게 도움이 되길 바랍니다.

위 내용은 jQuery를 사용하여 div의 드래그 앤 드롭 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.