JavaScriptプラグインを使用せず、ドラッグ&ドロップで2つのdivタグ要素エリア間を移動させる方法をご紹介します。
Contents
ディスプレイ広告
ドラッグ&ドロップで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タグ要素エリア間を移動できるデモ
※流用される場合は自己責任でお願いします。
デモページ