I'm building a web application where users can add upload image from their devices, I want them to be able to reorder these images using drag and drop to enable rearrangement. I tried using JQuery and javascript but it seems I can't get it right. Thanks in advance.
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>