マウスドラッグでアニメーション付きリスト入れ替えを実装したい

Question

前提・実現したいこと

JSにてマウスドラッグでリストの入れ替えを実装したい

発生している問題・エラーメッセージ

アニメーション付きでリスト入れ替えを実装したいがうまくいかない
アニメーションなしのリスト入れ替えは実装できている

該当のソースコード

    <ul class="box">
        <li class="box__item" data-num="0">
          <input type="checkbox">
          <span>リスト1</span>
        </li>
        <li class="box__item" data-num="1">
          <input type="checkbox">
          <span>リスト2</span>
        </li>
        <li class="box__item" data-num="2">
          <input type="checkbox">
          <span>リスト3</span>
        </li>
        <li class="box__item" data-num="3">
          <input type="checkbox">
          <span>リスト4</span>
        </li>
        <li class="box__item" data-num="4">
          <input type="checkbox">
          <span>リスト5</span>
        </li>
    </ul>

* {
  margin: 0;
  padding: 0;
}

.box {
  list-style: none;
  padding: 10px;
  
  &__item {
    user-select: none;
    background: #fff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
    cursor: grab;
    max-width: 500px;
    padding: 10px;
    margin-bottom: 10px;
    transition: box-shadow .3s;
    
    &.is-grab {
      cursor: grabbing;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, .15);
      position: absolute;
      z-index: 1;
    }
    
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

.is-hidden {
  // visibility: hidden;
  color: red;
}

'use strict';

// 変数
const box = document.querySelector('.box');
const item = document.querySelectorAll('.box__item');
let status = false;

// 対象要素の初期情報格納obj
let data = {
  target: null,
  diffX: 0,
  diffY: 0,
  cloneName: ""
};

// 要素まとめ
const util = {
  // 対象要素のindex番号を取得
  index(e) {
    const parent = e.parentElement;                // 対象要素の親要素
    const siblings = parent.children;              // li要素全て
    const siblingsArr = [].slice.call(siblings);   // li要素の配列
    const idx = siblingsArr.indexOf(e);            // 対象要素のindex

    return idx;
  },
  
  // クローン要素作成および差し込み
  insertClone(target, idx) {
    const cloneName = `itemClone_${Math.trunc(Math.random() * 10000)}`;   // クローン要素のクラス名
    const clone = target.cloneNode(true);                                 // 対象要素のクローン要素を作成
    const parent = target.parentElement;                                  // 対象要素の親要素
    const siblings = parent.children;                                     // 子要素(li)
    
    // クローン要素にクラス付与
    clone.classList.add('is-hidden');
    clone.classList.add(cloneName);
    
    // 対象要素の後ろにクローン要素を追加
    siblings[idx].insertAdjacentElement('afterend', clone);
    
    // クローンに付与するクラス名を返却
    return cloneName;
  },
  
  // 要素入れ替え
  swap(target) {
    const selfIdx = util.index(target);                     // ドラッグ要素のindex
    const cloneIdx = selfIdx + 1;                           // ドラッグ要素のclone要素
    const parent = target.parentElement;                    // ドラッグ要素の親要素
    const items = parent.querySelectorAll('.box__item');
    const siblings = parent.querySelectorAll(`:scope > *:not(.is-grab):not(.${data.cloneName})`);      // ドラッグ要素およびクローン要素以外のli

    // ドラッグおよびクローン要素以外にて入れ替え処理を実施
    for (let thatIdx = 0; thatIdx < siblings.length; thatIdx++) {
        const targetW = target.offsetWidth;                         // ドラッグ要素の幅
        const targetH = target.offsetHeight;                        // ドラッグ要素の高さ
        const targetRect = target.getBoundingClientRect();          // ドラッグ要素の位置を画面左上を(0, 0)とした上での相対位置
        const targetRectX = targetRect.left;                        // ドラッグ要素のX座標
        const targetRectY = targetRect.top;                         // ドラッグ要素のY座標
        const that = siblings[thatIdx];                             // 入れ替え対象要素
        const thatW = that.offsetWidth;                             // 入れ替え対象要素の幅
        const thatH = that.offsetHeight;                            // 入れ替え対象要素の高さ
        const thatRect = that.getBoundingClientRect();              // 入れ替え対象要素の位置を画面左上を(0, 0)とした上での相対位置
        const thatRectX = thatRect.left;                            // 入れ替え対象要素のX座標
        const thatRectY = thatRect.top;                             // 入れ替え対象要素のY座標
      
        const thatRectYHalf = thatRectY + (thatH / 2);              // 入れ替え対象要素の高さ中央
        const hitX = thatRectX <= (targetRectX + targetW) && thatRectX + thatW >= targetRectX;    // 水平方向にてドラッグ要素が入れ替え対象要素に当たっているかの判定
        const hitY = targetRectY <= thatRectYHalf && (targetRectY + targetH) >= thatRectYHalf;    // 垂直方向にてドラッグ要素が入れ替え対象要素に当たっているかの判定
        const isHit = hitX && hitY;                                 // ドラッグ要素が入れ替え対象要素に当たっているか判定

        if (isHit) {
          const siblingsAll = parent.children;    // 子要素（li）
          const clone = siblingsAll[cloneIdx];    // クローン要素
          const time = 1000;
          const move = targetH + 10;
          
          console.log("idx", selfIdx, thatIdx);
          
          // == ここで入れ替えアニメーションを実施する？ ==
          // clone.style.transition = `transform ${time}ms`;
          // that.style.transition = `transform ${time}ms`;
          
          // 上にスライドした場合
          // if(selfIdx > thatIdx) {
          //   clone.style.transform = `translateY(-${move * (selfIdx - thatIdx)}px)`;
          //   that.style.transform = `translateY(${move}px)`;
          // } 
          // 下にスライドした場合
          // else {
          //   clone.style.transform = `translateY(${move * (thatIdx - selfIdx + 1)}px)`;
          //   that.style.transform = `translateY(-${move}px)`;
          // }

          // ===== 終わったタイミングで入れ替えしないといけない =====
//           document.addEventListener('transitionend', (e) => {
//             if(e.target === clone) {
//               // parent.insertBefore(e.target, selfIdx > thatIdx ? that : that.nextSibling);              
//             }
//           })

            // クローン及びドラッグ要素の入れ替え
            parent.insertBefore(clone, selfIdx > thatIdx ? that : that.nextSibling);
            parent.insertBefore(target, clone);

        break;
      }
    }
  }
}

// マウスイベント
const mouseEvent = {
  // クリック時
  down(e) {
    // 並び替え不可の場合はreturn
    if(!status) return;
    
    const target = e.currentTarget;                     // クリック要素
    const pageX = e.pageX;                              // クリック時の水平位置
    const pageY = e.pageY;                              // クリック時の垂直位置
    const targetW = target.offsetWidth;                 // クリック要素の幅
    const targetRect = target.getBoundingClientRect();  // クリック要素の位置を画面左上を(0, 0)とした上での相対位置を取得
    const targetRectX = targetRect.left;                // クリック要素左端のX座標
    const targetRectY = targetRect.top;                 // クリック要素上端のY座標
    
    // クリック要素の初期情報をobjに格納
    data.target = target;
    data.diffX = pageX - targetRectX;
    data.diffY = pageY - targetRectY;
    data.cloneName = util.insertClone(target, util.index(target));
    
    // クリック要素のstyle設定, class付与
    target.style.width = `${targetW}px`;
    target.classList.add('is-grab');
    
    // マウスイベントを設定
    window.addEventListener('mousemove', mouseEvent.move);
    window.addEventListener('mouseup', mouseEvent.up);
  },
  
  // ドラッグ時（要素を移動させる処理）
  move(e) {
    const target = data.target;               // クリック時の対象要素
    const pageX = e.pageX;                    // ドラッグ時の水平位置
    const pageY = e.pageY;                    // ドラッグ時の垂直位置
    const targetPosL = pageX - data.diffX;    // 初期位置から水平方向への移動量
    const targetPosT = pageY - data.diffY;    // 初期位置から垂直方向への移動量
    
    // 対象要素のstyleを変更（ドラッグについてくるようにさせる）
    target.style.left = `${targetPosL}px`;    
    target.style.top = `${targetPosT}px`;   
    
    // 要素入れ替え処理
    util.swap(target);
  },
  
  // クリック終了時（要素、データの初期化）
  up() {
    const target = data.target;                           // クリック時の要素
    const cloneSelector = `.${data.cloneName}`;           // クローン要素のセレクタ
    const clone = document.querySelector(cloneSelector);  // クローン要素

    // 要素、データ、イベントの初期化
    data.cloneName = '';
    clone.remove();
    target.removeAttribute('style');
    target.classList.remove('is-grab');
    window.removeEventListener('mousemove', mouseEvent.move);
    window.removeEventListener('mouseup', mouseEvent.up);
  }
}

// li要素にイベント設定
item.forEach((e) => {
    e.addEventListener('mousedown', mouseEvent.down);
});

試したこと

swap()内で入れ替え処理を実装しているので、transitionendでtransitionが終了後にinsertbeforeによる入れ替えを実施しようとしたが、入れ替え処理が複数回発火する関係でうまくいかない
Promiseを使うかも考えたが、どうもピンとこない

補足情報（FW/ツールのバージョンなど）

実現したいアニメーションのイメージとしては「https://php-archive.net/demo-swap-html-elements/」のようなもの
こちらはボタンクリックで入れ替えアニメーションが実行されるが、これをマウスドラッグで実現したい

Comments

[yambejp]

「アニメーション付き」とはなんでしょう？

[vnsa7221]

@yambejpさん
こちら曖昧な表現で申し訳ないです。
イメージとしては「https://php-archive.net/demo-swap-html-elements/」のような挙動を想定しています。
こちらはボタンクリック時に変更するような挙動なのですが、これをマウスドラッグで実装したいという内容です。

Answer 1

https://www.youtube.com/watch?v=PJYFQYyzRgg&ab_channel=QixotlLFC
こちらのサイトを元に実装ができました。

Answer 2

ライブラリを使ってはどうでしょうか。

SortableJS