jEasyUI 基本のドラッグ＆ドロップ - ウェブ要素の自由なドラッグを実現

jEasyUI の基本的なドラッグアンドドロップ

この記事では、jEasyUI フレームワークでドラッグ＆ドロップ機能を実装するための基本的な知識を紹介します。`draggable()` および `droppable()` メソッドの使用方法、ドラッグ＆ドロップイベントの処理方法について説明し、ウェブページで要素のドラッグインタラクション効果をすばやく習得できるようにします。

1. jEasyUI ライブラリのインポート

jEasyUI のドラッグ＆ドロップ機能を使用するには、まず HTML ページに jQuery と jEasyUI のライブラリファイルをインポートする必要があります。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

2. ドラッグ可能な要素の作成

`draggable()` メソッドを使用して、要素をドラッグ可能な要素に変換します。

`handle` 属性は、ドラッグ可能な要素のどの部分がマウスでドラッグできるかを指定します。


<div id="draggable" style="width: 100px; height: 100px; background-color: lightblue;">
    <h3>ドラッグしてください</h3>
</div>

<script>
    $(function() {
        $('#draggable').draggable({
            handle: 'h3'
        });
    });
</script>

3. ドロップターゲットの作成

`droppable()` メソッドを使用して、要素をドロップターゲットに変換します。


<div id="droppable" style="width: 200px; height: 200px; background-color: lightgreen;">
    <h3>ここにドロップ</h3>
</div>

<script>
    $(function() {
        $('#droppable').droppable({
            onDrop: function(event, ui) {
                $(this).addClass('dropped');
            }
        });
    });
</script>

4. ドラッグ＆ドロップイベントの処理

以下のイベントを使用して、ドラッグ＆ドロップの動作をカスタマイズできます。

イベント	説明
onDragEnter	ドラッグ可能な要素がドロップターゲットの上にドラッグされたときにトリガーされます。
onDragLeave	ドラッグ可能な要素がドロップターゲットからドラッグアウトされたときにトリガーされます。
onDrop	ドラッグ可能な要素がドロップターゲットにドロップされたときにトリガーされます。
onDragOver	ドラッグ可能な要素がドロップターゲットの上を移動しているときにトリガーされます。

5. サンプル

ドラッグ可能な要素を作成し、ドロップターゲットに配置する完全なコードサンプルを以下に示します。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI ドラッグ＆ドロップサンプル</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            padding: 10px;
            cursor: move;
        }

        #droppable {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            text-align: center;
            padding: 20px;
            margin-top: 20px;
        }

        .dropped {
            background-color: lightcoral;
        }
    </style>
</head>
<body>

    <div id="draggable">
        <h3>ドラッグしてください</h3>
    </div>

    <div id="droppable">
        <h3>ここにドロップ</h3>
    </div>

    <script>
        $(function() {
            $('#draggable').draggable({
                handle: 'h3'
            });

            $('#droppable').droppable({
                onDrop: function(event, ui) {
                    $(this).addClass('dropped');
                }
            });
        });
    </script>

</body>
</html>

6. まとめ

jEasyUI は、ウェブページの要素のドラッグ＆ドロップ機能を実装するためのシンプルで使いやすい方法を提供します。
`draggable()` および `droppable()` メソッド、および関連するイベント処理関数を使用すると、さまざまなドラッグ＆ドロップインタラクション効果を簡単に作成できます。

jEasyUI 基本のドラッグ＆ドロップ - ウェブ要素の自由なドラッグを実現

1. jEasyUI ライブラリのインポート

2. ドラッグ可能な要素の作成

3. ドロップターゲットの作成

4. ドラッグ＆ドロップイベントの処理

5. サンプル

6. まとめ

関連するQA