ドラッグ&ドロップで、div要素間を移動できるp要素

ドラッグ&ドロップで、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>

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>

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>

スポンサード リンク

カテゴリー: JavaScript, ドラッグ&ドロップ, 逆引き パーマリンク