No map on this page. No, but still we load the Google Maps API for using the magnificent GDraggableObject. Did you try dragging the blocks on left.
Sure the javascript of the leading draggable maps contains a proven and optimised mechanism for dragging dom blocks.
GDraggableObject provides options and methods that are just made for making drag sortable lists. You don't have to load a huge general purpose javascript library for that purpose.
Option {restrictX:true} makes the block draggable vertical only. left and .top properties return the position of the block. dragging() method is essential. It tells that object is under drag, so do not position that by code.
SortStack() class was created using those gifts. Actually they been there for two years but I happened to be the first one trying them.When a block is made a GDraggableObject, its positioning is switched to 'absolute'. That destroys the page layout. They kind of vanish from the browser made layout. They must be wrapped in a container that keeps its size though its child elements vanish.
The code of
SortStack() finds the position of each draggable block before it is made draggable. The position is returned the first thing after the block is made draggable by moveTo() method.Finding blocks actual position is not as easy as it sounds. Dom elements do not have a property that would directly tell its position on page. offsetLeft and offsetTop tell you its position inside the parent element. So you have to also find those properties of the parent element and its parent element...
I chose this function to find the initial positions. I rely on Peter-Paul Koch's quirksmode.org. The function sums the offset properties of the chain. Still there are some browser specific errors caused by different ways to include borders, margins and paddings. So keep those in minimum. Also absolute positioning of parent element causes trouble.
A stack of elements is made drag-sortable by
new SortStack(array);. The parameter is an Array containing the dom nodes to be included in the stack.The array can be formed easily by
getElementsByTagName(). See the function makeBlockArray() in source code.Drag sorting takes a lot of javascript computing and dom operations. Poor javascript performance of IE does not provide smooth dragging. That is why 'economy' option was written. Test page. By setting {economy:true}, the sorting is performed on 'drop' only (not on 'drag').
SortStack.reset() method returns to the original order.One size fits all. SortStack can handle only elements with equal height at this stage (v0.1). I will release a revision with capability to handle differently sized elements in a stack but it takes a lot of x-browser evaluation first.
You can test what happens with differently sized elements by clicking this. It makes paragraphs of this story a SortStack() instance. Luckily there is the powerful [Reset] button.
Applications? Sure you immediately have an idea. Driving directions route order? Feel free to apply the code. The scary Apache license statement allows you to do anything with the code but not remove the statement. What? Yes, you can use, modify, improve, distribute or even include the code in paid projects but the Apache license keeps the copyright. So you cannot say it is your property, it is public property.