JavaScript PR

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

記事内に商品プロモーションを含む場合があります

JavaScriptプラグインを使用せず、ドラッグ&ドロップで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,"MS Pゴシック",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)2つの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>

【dataTransfer】ドラッグ&ドロップで2つのdivタグ要素エリア間を移動できるデページ

【dataTransfer】ドラッグ&ドロップで2つのdivタグ要素エリア間を移動できるデモ

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。