ドラッグ&ドロップ操作中の要素のスタイルをCSSを利用して変更する

ドラッグ&ドロップ操作中の要素のスタイルをCSSを利用して変更するコードを紹介します。

概要

ドラッグ操作中の要素のスタイルを変更すする場合は、ドラッグ開始時にサブクラス名を追加し、ドラッグ終了後にサブクラスを削除する方法で対応できます。CSSの属性セレクタを利用してdraggable属性での選択をした場合、ドラッグしていない状態でもスタイルが反映されてしまうため、ドラッグ中のみスタイルを変更する場合は、JavaScriptを利用する必要があります。

プログラム

コード

下記のHTMLファイル、CSSファイルを記述します。

DragCssStyle.css

.DragItem{
    margin-top:2px;
    border:1px solid #0073c6;
}

.DragItem.active{
    border:1px solid #ff6a00;
}

DragCssStyle.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="DragCssStyle.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="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>
</body>
</html>

解説

ページ表示時にload関数が実行されます。load関数では、elem1～elem5の要素に対して、dragstart, dragend のイベントハンドラを設定します。
elem1～elem5(アイテム 01～アイテム 05)の項目がドラッグされると、onDragStart() 関数が呼び出されます。関数内ではドラッグされた要素のclassListにactiveクラスを追加しています。classListの操作の詳細はこちらの記事を参照して下さい。

function onDragStart(e) {
  e.target.classList.add('active');
}

active サブクラスが追加された場合のスタイルはCSSファイルに記述されている .DragItem.active が適用されます。

.DragItem.active{
    border:1px solid #ff6a00;
}

ドラッグが終了した際は、onDragEnd() 関数が呼び出されます。関数内ではドラッグされた要素のclassListから、active クラスを取り除きます。この処理により、サブクラスが削除され元のスタイルに戻ります。

function onDragEnd(e) {
  e.target.classList.remove('active');
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[アイテム 02]の項目をドラッグします。ドラッグを開始すると、外枠の色がブルーからオレンジ色に変わります。

ドラッグ中はオレンジ色の状態です。

ドラッグしていた要素をドロップしドラッグ＆ドロップ処理が終了すると、外枠の色が元の色に戻ります。

ドラッグされている間だけ、ドラッグ要素のスタイルを変更する動作が実装できました。

プログラム例:他の要素も変更する場合

コード

先のコードのCSSファイルを下記に変更します。枠線だけでなく、透明度も変更します。

.DragItem {
    margin-top: 2px;
    border: 1px solid #0073c6;
    height:32px;
    width:256px;
    cursor: move;
}
.DragItem.active {
    border: 1px solid #ff6a00;
    opacity: 0.4;
}