ドラッグで優先順位を並べ替えるアンケート

<div class="d04-14-09-wrap">
          <span class="d04-14-09-label">重要だと思う順に並べ替え</span>
          <ul class="d04-14-09-list">
            <li class="d04-14-09-row" draggable="true"><span class="d04-14-09-grip">⋮⋮</span>価格</li>
            <li class="d04-14-09-row" draggable="true"><span class="d04-14-09-grip">⋮⋮</span>品質</li>
            <li class="d04-14-09-row" draggable="true"><span class="d04-14-09-grip">⋮⋮</span>サポート</li>
          </ul>
        </div>

.d04-14-09-wrap{width:min(280px,100%)}
        .d04-14-09-label{display:block;margin:0 0 10px;font-size:12px;color:#8a93a3}
        .d04-14-09-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
        .d04-14-09-row{
          display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;color:#333;
          background:#f6f7fb;border-radius:8px;cursor:grab;transition:background .2s,opacity .2s;
        }
        .d04-14-09-row.is-dragging{opacity:.4}
        .d04-14-09-row.is-over{background:#eef2ff}
        .d04-14-09-grip{color:#c3c9d4;font-size:12px;letter-spacing:1px}

(function(){
        var wrap=document.querySelector('.d04-14-09-wrap');
        if(!wrap)return;
        var list=wrap.querySelector('.d04-14-09-list');
        var dragEl=null;
        list.querySelectorAll('.d04-14-09-row').forEach(function(row){
          row.addEventListener('dragstart',function(){
            dragEl=row;
            row.classList.add('is-dragging');
          });
          row.addEventListener('dragend',function(){
            row.classList.remove('is-dragging');
            list.querySelectorAll('.d04-14-09-row').forEach(function(r){r.classList.remove('is-over');});
          });
          row.addEventListener('dragover',function(e){
            e.preventDefault();
            if(row===dragEl)return;
            row.classList.add('is-over');
          });
          row.addEventListener('dragleave',function(){
            row.classList.remove('is-over');
          });
          row.addEventListener('drop',function(e){
            e.preventDefault();
            row.classList.remove('is-over');
            if(row===dragEl||!dragEl)return;
            var rows=Array.prototype.slice.call(list.children);
            if(rows.indexOf(dragEl)<rows.indexOf(row)){
              list.insertBefore(dragEl,row.nextSibling);
            }else{
              list.insertBefore(dragEl,row);
            }
          });
        });
      })();