Как можно изменять порядок элементов массива из DOM?

339

06 июня 2021, 08:20

У меня в реакт компоненте, рендерется определенный список из массива с помощью map(). Соответственно в DOM они отображаются последовательно, соответсвтенно порядку элементов в массиве. Возник вопрос, можно ли менять элемент массива местами, меняя их последовательность в дом, например с помощью драгдроп. Такое возможно?

Answer 1

Как то так?

let elements = ['red','green','blue','cyan','magenta']; 
 
document.body.innerHTML = elements.map(e =>  
  `<div style='color:${e}' data-value='${e}' class='draggable'>${e}</div>`).join(''); 
 
document.querySelectorAll('.draggable').forEach(e => { 
  e.draggable = true; 
  e.ondragstart = e => e.dataTransfer 
    .setData("value", e.target.dataset.value); 
  e.ondragover = e => { 
    upd(); 
    e.target.classList.add('over'); 
    e.preventDefault(); 
  }; 
  e.ondrop = e => { 
    upd(); 
     
    let fromEl = document.querySelector(`[data-value="${e.dataTransfer.getData('value')}"]`); 
    let toEl = e.target; 
     
    // move in array 
    let arr = [].slice.call(document.querySelectorAll('.draggable')); 
    let fromIndex = arr.indexOf(fromEl); 
    let toIndex = arr.indexOf(toEl); 
    let element = elements[fromIndex]; 
    elements.splice(fromIndex, 1); 
    elements.splice(toIndex, 0, element); 
     
    // move in dom 
    e.target.after(fromEl);  
     
    console.log(JSON.stringify(elements)); 
  }; 
}) 
 
function upd(){ 
    let old = document.querySelector('.over'); 
    old && old.classList.remove('over'); 
}

.draggable { 
  border: solid; 
  width: 100px; 
  height: 22px; 
  margin-bottom: 2px; 
  text-align: center; 
} 
 
.over { 
  background-color:  wheat; 
}