ドラッグ&ドロップで、div要素間を移動できるp要素のJavaScriptサンプル。
サンプル(実装例)
サンプルA
サンプルB
サンプルC
サンプル(実装例)の動作について
ドラッグ&ドロップで、「サンプルA~B」のp要素を、赤い背景色のdiv要素から青い背景色のdiv要素へ、もしくは、青い背景色のdiv要素から赤い背景色のdiv要素へ移動できる。
ソースコード
JavaScript
<script>
function sampleDrag( $event ) {
$event.dataTransfer.setData( "Text", $event.target.id );
}
function sampleDrop( $event, $this ) {
$event.preventDefault();
var $data = $event.dataTransfer.getData( "Text" );
$this.appendChild( document.getElementById( $data ) );
}
function sampleAllowDrop( $event ) {
$event.preventDefault();
}
function sampleChangeBackgroundColor( $this, $color ) {
$this.style.backgroundColor = $color;
}
</script>
function sampleDrag( $event ) {
$event.dataTransfer.setData( "Text", $event.target.id );
}
function sampleDrop( $event, $this ) {
$event.preventDefault();
var $data = $event.dataTransfer.getData( "Text" );
$this.appendChild( document.getElementById( $data ) );
}
function sampleAllowDrop( $event ) {
$event.preventDefault();
}
function sampleChangeBackgroundColor( $this, $color ) {
$this.style.backgroundColor = $color;
}
</script>
HTML
<div
id="dropSampleA"
ondrop="sampleDrop( event, this ); sampleChangeBackgroundColor( this, 'red' );"
ondragover="sampleAllowDrop( event ); sampleChangeBackgroundColor( this, 'yellow' );"
ondragleave="sampleChangeBackgroundColor( this, 'red' );"
>
<p id="dragSampleA" draggable="true" ondragstart="sampleDrag( event );">
サンプルA
</p>
<p id="dragSampleB" draggable="true" ondragstart="sampleDrag( event );">
サンプルB
</p>
<p id="dragSampleC" draggable="true" ondragstart="sampleDrag( event );">
サンプルC
</p>
</div>
<div
id="dropSampleB"
ondrop="sampleDrop( event, this ); sampleChangeBackgroundColor( this, 'blue' );"
ondragover="sampleAllowDrop( event ); sampleChangeBackgroundColor( this, 'yellow' );"
ondragleave="sampleChangeBackgroundColor( this, 'blue' );"
>
</div>
<div style="clear: both;"></div>
id="dropSampleA"
ondrop="sampleDrop( event, this ); sampleChangeBackgroundColor( this, 'red' );"
ondragover="sampleAllowDrop( event ); sampleChangeBackgroundColor( this, 'yellow' );"
ondragleave="sampleChangeBackgroundColor( this, 'red' );"
>
<p id="dragSampleA" draggable="true" ondragstart="sampleDrag( event );">
サンプルA
</p>
<p id="dragSampleB" draggable="true" ondragstart="sampleDrag( event );">
サンプルB
</p>
<p id="dragSampleC" draggable="true" ondragstart="sampleDrag( event );">
サンプルC
</p>
</div>
<div
id="dropSampleB"
ondrop="sampleDrop( event, this ); sampleChangeBackgroundColor( this, 'blue' );"
ondragover="sampleAllowDrop( event ); sampleChangeBackgroundColor( this, 'yellow' );"
ondragleave="sampleChangeBackgroundColor( this, 'blue' );"
>
</div>
<div style="clear: both;"></div>
CSS
<style>
#dropSampleA,
#dropSampleB {
float: left;
width: 280px;
min-height: 181px;
padding: 10px;
border: 1px solid gray;
}
#dropSampleA {
background-color: red;
}
#dropSampleB {
background-color: blue;
}
#dragSampleA,
#dragSampleB,
#dragSampleC {
width: 258px;
margin: 10px 0;
padding: 10px;
border: 1px solid gray;
text-align: center;
}
#dragSampleA {
background-color: pink;
}
#dragSampleB {
background-color: lightblue;
}
#dragSampleC {
background-color: lightgreen;
}
</style>
#dropSampleA,
#dropSampleB {
float: left;
width: 280px;
min-height: 181px;
padding: 10px;
border: 1px solid gray;
}
#dropSampleA {
background-color: red;
}
#dropSampleB {
background-color: blue;
}
#dragSampleA,
#dragSampleB,
#dragSampleC {
width: 258px;
margin: 10px 0;
padding: 10px;
border: 1px solid gray;
text-align: center;
}
#dragSampleA {
background-color: pink;
}
#dragSampleB {
background-color: lightblue;
}
#dragSampleC {
background-color: lightgreen;
}
</style>