2020/04/27 10:19

JavaScriptを使ってドラッグ＆ドロップできる要素を作る

WEBサイト上であまり使う事はないかもですが、要素を動かして移動させるというやり方の基本みたいなものとなります。

これを踏まえて、別の何かを作成するという1つのステップとして参考までに紹介します。

まずはサンプル

いきなりですがサンプルです。

AからBへ黒いボックスをドラッグ移動できます。また、その逆も可能。

上記のサンプルコード

必要なコードは3種類

・htmlの記述

・JSの記述

・cssを適当にあてる

【HTML】


<div class="p-wrapper">
<div id="drop" class="p-start-area" ondragover="DragOver(event)" ondrop="Drop(event)">
<div id="item" class="p-item" draggable="true" ondragstart="DragStart(event)">
</div>
A
</div>
 
<div id="drop" class="p-drag-position" ondragover="DragOver(event)" ondrop="Drop(event)">
B
</div>
</div>

【Javascript】


// ドラッグ開始時にデータの値を設定する
function DragStart(event) {
if ($(window).width() > 768 ) {
event.dataTransfer.setData("text", event.target.id);
$('.p-drag-position').addClass('dragging');
$('.p-start-area').addClass('dragging');
};
}
 
// ドロップ時に元のドラッグ値を取得し、現在の要素上に入れ子で保存する
function Drop(event) {
if ($(window).width() > 768 ) {
var id = event.dataTransfer.getData("text");
var elm = document.getElementById(id);
event.currentTarget.appendChild(elm);
event.preventDefault();
$('.p-drag-position').removeClass('dragging');
$('.p-start-area').removeClass('dragging');
};
}
 
// ブラウザ標準のドロップ動作をキャンセル
function DragOver(event) {
event.preventDefault();
}

【CSS】


.p-wrapper {
position: relative;
width: 100%;
z-index: 999;
}
.p-start-area {
position: relative;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ddd;
z-index: 999;
margin-bottom: 40px;
font-size: 2rem;
font-weight: bold;
color: #fff;
}
 
.p-drag-position {
position: relative;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
z-index: 999;
font-size: 2rem;
font-weight: bold;
color: #fff;
}
 
.p-item {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 50px;
height: 50px;
text-align: center;
padding: 10px;
background-color: #000;
cursor: move;
}
 
.dragging {
background-color: #f00;
opacity: 0.7;
}
 
#drop {
-khtml-user-drag: element;
}