Pseudo code
DIV1
-- IMG 1
-- IMG 2
DIV2
-- IMG 3
-- IMG 4
What i'm intending on happening is that images in DIV1 and DIV2 should be able to be swapped...but only one SWAP can happen at a time. if 1 and 3 are swapped then I can't swap 3 with 4 only after I replace 1 and 3 can I make another swap...
Also I should never be able to swap within in a div..
I understand the basics of HTML drag and drop I'm just not sure how to put restructions on the swapping. I don't need CODE however just a path to get started.
Set a data attribute on each image containing a reference to the parent Div.
Loop through the images on interaction, if you find an image with a parent attribute that doesn't match it's actual current parent then disable the drag.
Have a look at Jquery Sortable Lists That has much of the functionality you are looking for out of the box, and allows you to test for target and origin which would allow you to implement no swapping within div.