This is more of a theoretical question which I hope is okay!? I want to code my own drag and drop jQuery plugin, but i'm wondering the best way to go about structuring my code and actually doing it.
Note: This MAY be opinion orientated as well but I don't mind, I just need suggestions on a good way to go about this and structuring the code etc.
Item Class: I want to use Object Orientated Programming here, so was going to store the reference to each draggable item in an instance of a class, which are in turn stored within an array. Then within this class I can do calculations based on that draggable item.
Actually moving items: Well, I will just change the items position to fixed/absolute and adjust the top and left values, what happens on release I cover below.
Moving items out of the way to place selected, and actually dropping an item in a new location: That's a long bolded one! But yeah, i'm not too sure on how I would go about this! Basically I would have a list of
li's which I want to re-order, but as I move an item to a new position I want the other items to slide out of the way smoothly, preferably using transforms as to pass the animation over to the GPU.
Moving items into other stacks: Some of my
li's may have
ul's within then, I need the ability to detect when the draggable item is being attempted to be dropped into another item. If this makes sense! :(
Kinda example structure of my items?
<ul id="sortable"> <li id="1">Home</li> <li id="2">Showroom <ul> <li>Stoke</li> <li>Macclesfield</li> </ul> </li> <li id="3">Finance</li> <li id="4">Servicing</li> <li id="5">About Us</li> <li id="6">Contact</li> </ul>
I have sort of started some of the code, however I don't want to do too much if i'm going about it all wrong!