Drag and Drop related m2m images to a parent gallery

I’ve searched extensively and I can’t find anything that solves how to drag and drop images to a parent gallery model item. Literally every search related to drag and drop only concerns how to do drag and drop sort an existing collection of items to change the item order. I’m not interested in that.

What I would like to do is display related Images visually as thumbnails in a separate from div and make them draggable with a js library. That part is probably easy enough after iterating Images.objects.all() to build the from div.

But I’m not sure how to make a To form widget (or To div that can be submitted with the update of the Gallery model) that will:

  • accept the DROPPED images (thus relating them from a much bigger cxn to just being associated with the Gallery item currently being edited in the form)
  • while also displaying the image in the To form field or div (essentially I’m trying to “Copy” the img from the “From” to the “To” div / field while maintaining it’s visual appearance as well as underlying PK because the visual appearance of the current Gallery’s Image items makes it easier to see what the current state of the related items are vs using text select boxes)
  • allow me to submit the related image items back with the parent Gallery item to commit it to the database.

I haven’t seen any django “plugins” to do this kind of thing and I have yet to find this kind of solution anywhere online.

Any help or tips is totally appreciated.

Mostly with how to track the dropped “To” items as actual images and submit them with the Gallery parent item (reverse relationship on the backend).