ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させる方法【JavaScriptプラグイン未使用】｜DAD UNION

JavaScriptプラグインを使わず、2つのdivタグエリア間で要素をドラッグ＆ドロップするシンプルな方法を紹介します。
本記事では、HTML、CSS、JavaScriptを組み合わせ、ユーザーが自由に要素を移動できるインターフェースを作成します。基本から丁寧に説明します。

Contents

ドラッグ＆ドロップとは？
CSSによるスタイル設定
HTMLで構成するドラッグ＆ドロップUI
JavaScriptによるドラッグ＆ドロップ処理
【dataTransfer】ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動できるデページ
まとめ

ドラッグ＆ドロップとは？

ドラッグ＆ドロップは、マウスを使ってある要素をつかみ、別の場所に移動する機能です。Webアプリケーションで頻繁に使われ、ユーザーが直感的に操作できるUIの実装に役立ちます。例えば、ファイルのアップロード、カレンダーの予定の移動、タスク管理アプリのカード整理など、多くの場面で利用されています。

本記事のサンプルでは、divエリア間でテキスト要素を自由にドラッグ＆ドロップするUIを作成します。

CSSによるスタイル設定

まずは、各要素の見た目を整えるためのCSSコードを確認しましょう。必要に応じて、このCSSを調整して見た目をカスタマイズできます。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.2em;
}

#wrap{
  width: 524px;
  margin: 0 auto;
}
#dpsmpla,
#dpsmplb {
    float: left;
    width: 240px;
    height:200px;
    padding: 10px;
    border:dotted 1px #000000;
}
#dpsmpla {
    background-color: #DBDBEA;
}
#dpsmplb {
    background-color: #ffffff;
}
#dgsmpla,
#dgsmplb,
#dgsmplc {
    width: 200px;
    margin: 18px auto;
    padding: 6px;
    text-align: center;
    font-weight: bold;
}
#dgsmpla {
    background-color: #0040FF;
}
#dgsmplb {
    background-color: #FFFF00;
}
#dgsmplc {
    background-color: #FF2626;
}
</style>

このCSSでは、ドラッグ元エリア、ドロップ先エリア、各テキスト要素のスタイルを設定しています。各色やレイアウトを変更することで、ユーザーのデザインニーズに合わせてカスタマイズできます。

HTMLで構成するドラッグ＆ドロップUI

HTMLの構造は、ユーザーが操作するdivエリアを定義し、それぞれのエリアにテキスト要素を配置するものです。

<h1>左のグレーエリアにあるサンプルa,b,cのタグ要素を、右の白エリアにドラッグ＆ドロップで移動できます</h1>
<br>

<div id="wrap">
<div id="dpsmpla" ondrop="smpldrop( event, this );" ondragover="allowdrop( event );">
    <p id="dgsmpla" draggable="true" ondragstart="smpldrag( event );">サンプルa</p>
    <p id="dgsmplb" draggable="true" ondragstart="smpldrag( event );">サンプルb</p>
    <p id="dgsmplc" draggable="true" ondragstart="smpldrag( event );">サンプルc</p>
</div>
<div id="dpsmplb" ondrop="smpldrop( event, this );" ondragover="allowdrop( event );"></div>
</div>

このHTMLコードは、2つのdivエリア間でテキスト要素を自由に移動できるUIを提供します。各テキスト要素にはdraggable=”true”属性があり、ドラッグ操作を可能にしています。

JavaScriptによるドラッグ＆ドロップ処理

次に、ドラッグ＆ドロップの機能を実現するためのJavaScriptコードを紹介します。以下のスクリプトを使って、要素のドラッグとドロップを制御します。

<script type="text/javascript">
function smpldrag( $event ) {
    $event.dataTransfer.setData( "Text", $event.target.id );
}
function smpldrop( $event, $this ) {
    $event.preventDefault();
    var $data = $event.dataTransfer.getData( "Text" );
    $this.appendChild( document.getElementById( $data ) );
}
function allowdrop( $event ) {
    $event.preventDefault();
}
</script>

このJavaScriptでは、dataTransferオブジェクトを使って、ドラッグされた要素の情報を一時的に保存し、ドロップ先に移動させます。allowdrop関数を使うことで、ドロップ操作が許可されるようにしています。