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

JavaScriptプラグインを使用せず、ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させる方法をご紹介します。

Contents

ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させるタグ要素のCSS記述
ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させるタグのHTML記述
ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させるJavaScript記述
【dataTransfer】ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動できるデページ

ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させるタグ要素のCSS記述

※ドラッグ元エリア（#dpsmpla）・ドロップ先エリア（#dpsmplb）・ドラッグ＆ドロップ要素（#dgsmpla,#dgsmplb,#dgsmplc）の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>

ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させるタグのHTML記述

※タグのondrop、ondragover、draggable、ondragstartイベントを使ってドラッグ＆ドロップさせます。3つのドラッグ＆ドロップ要素エリア（#dgsmpla,#dgsmplb,#dgsmplc）をドラッグ元エリア（#dpsmpla）・ドロップ先エリア（#dpsmplb）２つの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>

ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させるJavaScript記述

※ドラッグを開始したらそのタグ要素を設定し、ドロップ後に移動先のdivタグエリアに設定したタグ要素を追加します。

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