Estoy creando una aplicación web donde los usuarios pueden agregar una imagen cargada desde sus dispositivos, quiero que puedan reordenar estas imágenes usando arrastrar y soltar para habilitar la reorganización. Intenté usar JQuery y javascript, pero parece que no puedo hacerlo bien. Gracias por adelantado.
document.querySelector("#files").addEventListener("change", (e) => { if (window.File && window.FileReader && window.FileList && window.Blob) { const files = e.target.files; const output = document.querySelector("#result"); const div = document.createElement("ul"); for (let i = 0; i < files.length; i++) { if (!files[i].type.match("image")) continue; const picReader = new FileReader(); picReader.addEventListener("load", function (event) { const picFile = event.target; const div = document.createElement("div"); div.setAttribute("draggable", "true"); div.setAttribute("class", "image_div"); div.style.width = "60px"; div.style.height = "60px"; div.style.marginLeft = "10px"; div.style.flexShrink = "0"; div.style.overflowY = "hidden"; div.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`; output.appendChild(div); }) picReader.readAsDataURL(files[i]); } } else { alert("Your browser does not support File API") } }) #result { display: flex; background-color: yellow; margin-top: -60px; margin-left: 60px; height: 65px; width:100%; overflow-x: auto; overflow-y: hidden; } .thumbnail { /*height: 60px; width: 60px; border-radius: 6px;*/ height: 60px; width: 60px; object-fit:cover; border-radius: 6px; } <div id="result"> </div>