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タグ要素エリア間を移動できるデモ
※流用される場合は自己責任でお願いします。
デモページ