iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript JavaScript Drag&Drop

ドラッグ&ドロップ操作中にドラッグ元の要素だけスタイルを変更する

概要

こちらの記事では、ドラッグ＆ドロップの操作中にドラッグされた要素のスタイルを変更するコードを紹介しました。記事で紹介した実装では、ドラッグされているゴーストのイメージとドラッグ元の要素のスタイルを変更しましたが、ゴーストのイメージとドラッグ元の要素のスタイルをそれぞれ違うものに変更したい場合があります。

この記事では、ゴーストのイメージと、ドラッグ元の要素を異なるスタイルで表示するコードを紹介します。

動作

ドラッグ中に表示されるゴーストの表示スタイルは、ドラッグ開始時点でのドラッグ元の要素の表示スタイルになります。通常はドラッグ開始時点の要素と同じものがフォースととして設定されますが、アニメーションにより遅延表示させることで、ドラッグ元の要素をゴーストのイメージと違ったスタイルに変更できます。

プログラム

コード

下記のHTMLファイルを作成します。

DragCssStyle4.css

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

.DragItem.active {
    border: 1px solid #ff6a00;
    transition: transform ease-out 0.25s;
    transform: scale(0.7);
}

DragCssStyle4.html

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

解説

基本的な動作は、こちらの記事で紹介しているドラッグ処理中にスタイルを変更するコードと同様です。今回のコードでは、さらに、transitionとtransformをスタイルに追加しています。transitionにより、ドラッグ開始時の後に変化が起きる場合、ゴーストのイメージには反映されず、ドラッグ元の要素のみに反映される動作となります。
この設定の例では、ドラッグ元の要素、ゴーストともにオレンジ色の枠の表示に変わりますが、サイズの縮小はゴーストのイメージには適用されず、ドラッグ元の要素にのみ反映されます。

.DragItem.active {
    border: 1px solid #ff6a00;
    transition: transform ease-out 0.25s;
    transform: scale(0.7);
}

補足

同じ仕組みでドラッグ開始時に、ドラッグ元の要素を非表示にすることもできます。ドラッグ元の要素を非表示にするコードはこちらの記事を参照してください。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
ドラッグ&ドロップ操作中にドラッグ元の要素だけスタイルを変更する:画像1

[アイテム 03]の項目をドラッグします。ドラッグを開始すると枠の色がオレンジに変わります。また、ドラッグ元の要素の大きさが小さくなります。
ドラッグ&ドロップ操作中にドラッグ元の要素だけスタイルを変更する:画像2

ドラッグ中は枠の色はオレンジのままです。

ドラッグを終了すると元の表示に戻ります。

プログラム例 : 枠の色を変える場合

ドラッグ元の要素の枠の色を変える場合、既に .DragItem.active で枠の色が設定されているため、transitionを利用して別の枠色には変更できません。この場合は、Animation と keyframes を利用してアニメーションで枠の色を変えることで実現できます。

コード

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

DragCssStyle5.css

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

.DragItem.active{
  border: 1px solid #ff6a00;
  animation: anm 0.1s ease 0s 1 normal forwards running;
}

@keyframes anm{
  0% {
    border: 1px solid #ff6a00;
  }
  100% {
    border: 1px solid #C0C0C0;
  }
}

DragCssStyle5.html

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

解説

スタイル定義で、animation を設定しアニメーションをする動作にします。キーフレーム anm を指定します。 animation-fill-mode の値を forwardsに設定しアニメーション終了状態を維持する動作にします。

.DragItem.active{
  border: 1px solid #ff6a00;
  animation: anm 0.1s ease 0s 1 normal forwards running;
}

キーフレームの設定は下記になります。枠の色をアニメーションでグレーに変更します。

@keyframes anm{
  0% {
    border: 1px solid #ff6a00;
  }
  100% {
    border: 1px solid #C0C0C0;
  }
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ドラッグ&ドロップ操作中にドラッグ元の要素だけスタイルを変更する:画像5

[アイテム 04]の項目をドラッグします。ドラッグ時に表示されるゴーストのイメージはオレンジの枠で表示されます。ドラッグ元の要素の枠は灰色の表示になっていることが確認できます。
ドラッグ&ドロップ操作中にドラッグ元の要素だけスタイルを変更する:画像6

ドラッグが終了すると元の色に戻ります。