problems w/ dragging and dropping figures

Question

im a freshman in high school taking programming classes and drag and drop has given me unlimited headaches and migraines

currently im trying to make code to upload images to a site and edit them using the filter css attribute, change the size of them, etc; problem is that i cant figure out how to drag and drop figure elements; for some reason using the notes from my teacher aint working, even after tweaking it

normally it wouldnt be as bad of a problem but last wednesday my laptops hard drive failed and i cant work on anything from home and the time ive used to try and fix the code hasnt gotten me anywhere

ive gotten a ton of errors but as of now its at a point where there are no errors in the console and that it just doesnt work

the grading period ends thursday and i need a fix

i tried looking up a tutorial of how to drag and drop figure elements but all i got on it was either tutorials for just regular images and div elements

from the tweaking i did do to the code i think that the problem is in the function drop(ev){} but i dont know what exactly is wrong with it because its still not working

the only other thing i think is to use an external JS file because i also put jquery in the same script tag

here is my code:

$(function() {
  $("#list").sortable({
    update: function(event, ui) {
      getIdsOfImages();
    }
  });
});

function getIdsOfImages() {
  var values = [];
  $('.images').each(function(index) {
    values.push($(this).attr("id").replace("fig", ""));
  });
}
//this allows images to be swapped



//global variable to store dragged ID b/c handleDragOver is not able to obtain it
var draggedData = null;

function dragover(ev) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
  const draggedId = draggedData;
  if (!event.target.classList.contains(draggedId)) {
    event.target.style.backgroundColor = "#f57891";
    return;
  } else {
    event.target.style.backgroundColor = "";
  }
}

function drop(ev) {
  ev.preventDefault();
  //get the id of image that was dragged
  let draggedID = ev.dataTransfer.getData('text');

  //get figure by id and append figure to drop zone
  let draggedFigure = document.getElementById(draggedID);
  let classNames = ev.target.classList;
  console.log(classNames);

  //showing how to get innerText from dragged figure
  let theFigCaption = ev.target.nextSibling;
  let innerText = theFigCaption.innerText;

  //append the image to dropzone. ev.target is the dropzone
  if (classNames.contains(draggedID)) {
    event.target.appendChild(draggedFigure);
    //event.target.style.width = `${draggedFigure.nextSibling.width}px`;
    ev.target.classList.add('correct');
  } else {
    event.target.style.backgroundColor = "";
  }

}

function dragstart(ev) {
  ev.dataTransfer.dropEffect = 'move';
  //set the id of the image to be dragged
  ev.dataTransfer.setData("text/plain", ev.target.id);
  // console.log("Dragging ID of:", ev.target.id);

  //set the global variable to the id of element being dragged
  draggedData = ev.target.id;


}

function handledrag(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = 'move';
  ev.target.style.cursor = "move";
}




//ignore this long thing of code because this is what allows the uploaded images to be displayed and i had to add it to each input because if i used classnames then the image would show up in all 10 divs
var selDiv = "";
var storedFiles = [];
$(document).ready(function() {
  $(".upload").on("change", upload);
  selDiv = $("#work1");
});

function upload(e) {
  var files = e.target.files;
  var filesArr = Array.prototype.slice.call(files);
  filesArr.forEach(function(f) {
    if (!f.type.match("image.*")) {
      return;
    }
    storedFiles.push(f);

    var reader = new FileReader();
    reader.onload = function(e) {
      var html = '<img src="' + e.target.result + "\" data-file='" + f.name + "alt='Category Image' height='211px' width='375px' draggable='true' ondrag='handledrag(event)'      ondragstart='dragstart(event)'>";
      selDiv.html(html);
    };
    reader.readAsDataURL(f);
  });
}

#list {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto auto auto;
  column-gap: 5px;
  row-gap: 5px;
  justify-items: center;
}

#head,
#small {
  text-align: center;
}

.work {
  width: 375px;
  height: 211px;
  border: 1px solid black;
  background-position: center;
  background-size: cover;
}

#this {
  width: 960px;
  height: 540px;
  border: 1px solid black;
}

#ok {
  justify-content: center;
  align-content: center;
  display: grid;
  text-align: center;
}

.dragging {
  cursor: move;
  /*indicates something is being moved*/
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<main>
  <h1 id="head">Image Gallery Editor</h1>
  <h3 id="small">Upload up to 10 images to edit</h3>
  <div id="list">
    <figure id="fig1" class="images" name="fig1" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file1" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp" onclick="upload()">
      <figcaption id="pls" class="cap">Choose an image to upload</figcaption>
      <div id="work1" class="work" draggable="true">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig2" class="images" name="fig2" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file2" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="cap">Choose an image to upload</figcaption>
      <div id="work2" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig3" class="images" name="fig3" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file3" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="cap">Choose an image to upload</figcaption>
      <div id="work3" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig4" class="images" name="fig4" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file4" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="cap">Choose an image to upload</figcaption>
      <div id="work4" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig5" class="images" name="fig5" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file5" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="cap">Choose an image to upload</figcaption>
      <div id="work5" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig6" class="images" name="fig6" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file6" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="upload">Choose an image to upload</figcaption>
      <div id="work6" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig7" class="images" name="fig7" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file7" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="cap">Choose an image to upload</figcaption>
      <div id="work7" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig8" class="images" name="fig8" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file8" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="cap">Choose an image to upload</figcaption>
      <div id="work8" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig9" class="images" name="fig9" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file9" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp">
      <figcaption class="cap">Choose an image to upload</figcaption>
      <div id="work9" class="work">
        <img id="output1" class="output" />
      </div>
    </figure>
    <figure id="fig10" class="images" name="fig10" draggable="true" ondrag="handledrag(event)" ondragstart="dragstart(event)">
      <input type="file" id="file10" class="upload" accept="image/jpg, image/jpeg, image/png, image/gif, image/svg, image/webp" draggable="false">
      <figcaption draggable="false" class="cap">Choose an image to upload</figcaption>
      <div id="work10" class="work" draggable="false">
        <img id="output1" class="output" draggable="false" />
      </div>
    </figure>
  </div>
  <div id="ok" class="dropzone69">
    <h1>Drop images here to edit them</h1>
    <div id="this" class="dropzone" ondrop="drop(event)" ondragover="dragover(event)"></ div>
    </div>
</main>

(note: please focus on function drop() if you wanna try and fix it, thats where i think the problem is; function upload() is to upload the images and $function is to make the figure elements sortable