htmlとjavascriptを使って要素をドラッグ&ドロップさせる方法

ドラッグとドロップの違い

サイト上でのドラッグとドロップの違いをみていきましょう。

まずドラッグとは要素などをマウスでつかんで動かすことです。

そしてドロップとはその動かした要素をドロップ先に配置させることになります。

ドラッグ＆ドロップさせる方法

それではドラッグ&ドロップさせてみましょう。

html

<p>下の三つの要素を灰色のボックスにドラッグしてください。</p>
<ul ondragover="d_over(event)" ondrop="f_drop(event)">
        <li draggable="true" id="text1" ondragstart="d_start(event)">ドラッグ1</div>
        <li draggable="true" id="text2" ondragstart="d_start(event)">ドラッグ2</div>
        <li draggable="true" id="text3" ondragstart="d_start(event)">ドラッグ3</div>
</ul>

<ul class="dropbox" ondragover="d_over(event)" ondrop="f_drop(event)"></ul>

css

ul{
        display: flex;
        margin: 30px 0;
        padding: 0;
        list-style: none;
}
ul li{
        margin: 10px;
        padding: 10px;
        border: solid 1px #000;
	background: #fff;
}

.dropbox{
        border: solid 1px #000;
        padding: 10px;
        min-height: 46px;
	background: #eee;
}

javascript

function d_start(event){
	event.dataTransfer.setData("text", event.target.id);
}

function d_over(event){
        event.preventDefault();
}

function f_drop(event){
        let name = event.dataTransfer.getData("text");
        let elm =document.getElementById(name);
        event.currentTarget.appendChild(elm);
        event.preventDefault();
}

補足

html5からdraggable属性を指定することで要素をドラッグさせることができます。

<li draggable="true">ドラッグ1</div>

dataTransfer.setData

dataTransfer.setDataはドラッグする要素のデータを取得させることができます。

上記の例ではドラッグさせる要素のidを取得してDataTransferオブジェクトにセットしています。

preventDefault

preventDefaultはイベントにたいしてブラウザ上でデフォルトで設定されている動作をキャンセルさせることができます。

event.dataTransfer.getData

ドラッグされた要素のidをDataTransferオブジェクトから取得します。

サンプル