• HOME
  • CODE
  • JavaScriptを使ってドラッグ&ドロップできる要素を作る

2020/04/27 10:19

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

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

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

 

 

まずはサンプル

 

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

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

 

 

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;

}

 

 

まとめ

 

使い方としては、過去の案件でECサイトっぽいカート機能があるサイト制作の時に一度採用した事があります。

その時はページ下部に固定でカート内の中身や合計金額等を表示したボックスを表示させていたのですが、それが邪魔になる場合は横のサイドバーへと移動ができる、といった移動可能なショッピングカートを実装しました。

 

何かしらの参考になれば幸いです。

 

 

現場から以上です!

1587