ドラッグ&ドロップ操作中にドラッグ元の要素を非表示にするコードを紹介します。
概要
こちらの記事ではドラッグ操作中にドラッグされている要素のスタイルを変更するコードを紹介しました。この記事では、ドラッグ操作中にドラッグ元の要素を非表示にするコードを紹介します。
実現方法
ドラッグされた時点で、ドラッグされた要素を非表示にしてしまうと、ドラッグ中のゴーストのイメージも非表示になってしまいます。そのため、非表示にするまでをアニメーションに設定し若干のタイムラグを開けると、ゴーストのイメージが非表示にならずに動作させることができます。
プログラム
コード
.DragItem {
margin-top: 2px;
border: 1px solid #0073c6;
height:32px;
width:256px;
cursor: move;
}
.DragItem.active {
border: 1px solid #ff6a00;
visibility: hidden;
transition: visibility linear 0.1s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="DragCssStyle3.css" />
<script type="text/javascript">
function load() {
var elem = document.getElementById('elem1');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem2');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem3');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem4');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
elem = document.getElementById('elem5');
elem.addEventListener('dragstart', onDragStart, false);
elem.addEventListener('dragend', onDragEnd, false);
}
function onDragStart(e) {
e.target.classList.add('active');
}
function onDragEnd(e) {
e.target.classList.remove('active');
}
</script>
</head>
<body onload="load();">
<div id="Frame">
<div id="elem1" class="DragItem" draggable="true">アイテム 01</div>
<div id="elem2" class="DragItem" draggable="true">アイテム 02</div>
<div id="elem3" class="DragItem" draggable="true">アイテム 03</div>
<div id="elem4" class="DragItem" draggable="true">アイテム 04</div>
<div id="elem5" class="DragItem" draggable="true">アイテム 05</div>
</div>
</body>
</html>
解説
DragItem クラスのcursorプロパティを指定することで、枠内にマウスポインタが入ると、マウスポインタのカーソルの形状を変更できます。
.DragItem {
margin-top: 2px;
border: 1px solid #0073c6;
height:32px;
width:256px;
cursor: move;
}
activeサブクラスのスタイルが下記です。
visibility: hidden;を指定することで、ドラッグ時にはドラッグ元の要素を非表示にできます。ただしドラッグしたタイミングで非表示にすると、ゴーストのイメージも非表示になってしまうため、transition プロパティを指定してドラッグ開始から、0.1秒で非表示にするよう変更します。この処理によりゴーストの描画も実行されます。
.DragItem.active {
border: 1px solid #ff6a00;
visibility: hidden;
transition: visibility linear 0.1s;
}
実行結果
上記のHTMLを表示します。下図のページが表示されます。
[アイテム 03]の項目をドラッグします。ドラッグするとゴーストのイメージがマウスポインタの移動に伴って移動します。また、ドラッグ元の要素は非表示になります。(
こちらの記事と比較するとわかります。)
ドラッグ中はマウスポインタの移動に追従してゴーストのイメージも移動します。
ドラッグを完了すると、元のカラーに戻ります。ドラッグ元の要素の表示も元に戻ります。
参考 : transition を指定しない場合
.DragItem.active クラスのスタイルにtransition を指定しない場合どのような動作になるか確認します。.DragItem.active クラスのスタイルを下記の記述に変更します。
.DragItem.active {
border: 1px solid #ff6a00;
visibility: hidden;
}
Google Chromeでページを表示します。下図の画面が表示されます。このページの表示は先のものと違いはありません。
[アイテム 01]の項目をドラッグしてみます。ゴーストのイメージも表示されず、元の要素も非表示になりません。また、枠の色も変化しません。~
Microsoft Edgeの場合は若干動作が異なり、ゴーストのイメージは表示されず、元の要素が非表示になります。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2019-03-05
