jQueryを使ってdivのドラッグ＆ドロップ機能を実装する方法-フロントエンドQ&A-php.cn

jQueryを使ってdivのドラッグ＆ドロップ機能を実装する方法

PHPz

リリース： 2023-04-17 14:27:03

オリジナル

2478 人が閲覧しました

1. はじめに

フロントエンド開発において、ドラッグアンドドロップ機能は非常に一般的な操作方法であり、実装方法も比較的単純であり、多くの場合、次のようなフロントエンドフレームワークを通じて実装されます。 jQueryとして。この記事ではjQueryを使ってdivのドラッグ＆ドロップ機能を実装する方法を詳しく紹介します。

2. 実装手順

HTML 構造

まず、対応する構造、つまりドラッグ div を HTML 内で確立する必要があります。一般に、小さい領域に配置するには絶対配置を使用することをお勧めします。

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

ログイン後にコピー

CSS スタイル

次に、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%;
}

ログイン後にコピー

JS コード

最後に、ドラッグ機能は 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 を使用して、HTML の対話を通じて div 要素のドラッグ機能を実現する方法を紹介します。 CSS と JS を組み合わせることで、このインタラクティブな効果が簡単かつ簡単に実現されます。フロントエンド開発者の参考になれば幸いです。

以上がjQueryを使ってdivのドラッグ＆ドロップ機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。