再生キュー並び替え(ドラッグ)

<ul class="dragq07-06-09">
          <li draggable="true"><span class="gh07-06-09">⠿</span>光の粒子</li>
          <li draggable="true"><span class="gh07-06-09">⠿</span>夏の輪郭</li>
          <li draggable="true"><span class="gh07-06-09">⠿</span>静寂のあと</li>
          <li draggable="true"><span class="gh07-06-09">⠿</span>遠い声</li>
        </ul>

.d07-06-09 .dragq07-06-09{ list-style:none; margin:0; padding:0; width:85%; max-width:240px; font-size:13px; }
        .d07-06-09 .dragq07-06-09 li{ display:flex; align-items:center; gap:8px; background:#f7f7fa; border-radius:8px; padding:8px 10px; margin-bottom:5px; cursor:grab; transition:opacity .2s, background .2s; }
        .d07-06-09 .dragq07-06-09 li.drag589over{ background:#e0e7ff; }
        .d07-06-09 .dragq07-06-09 li.drag589ing{ opacity:.35; }
        .d07-06-09 .gh07-06-09{ color:#aaa; }

(function(){
        var root = document.querySelector('.d07-06-09');
        var list = root.querySelector('.dragq07-06-09');
        var dragEl = null;
        list.querySelectorAll('li').forEach(function(li){
          li.addEventListener('dragstart', function(){ dragEl = li; li.classList.add('drag589ing'); });
          li.addEventListener('dragend', function(){ li.classList.remove('drag589ing'); });
          li.addEventListener('dragover', function(e){ e.preventDefault(); li.classList.add('drag589over'); });
          li.addEventListener('dragleave', function(){ li.classList.remove('drag589over'); });
          li.addEventListener('drop', function(e){
            e.preventDefault();
            li.classList.remove('drag589over');
            if(dragEl && dragEl !== li){
              var items = Array.prototype.slice.call(list.children);
              var from = items.indexOf(dragEl), to = items.indexOf(li);
              if(from < to){ li.after(dragEl); } else { li.before(dragEl); }
            }
          });
        });
      })();