Draggable objects alignment - html

Question

Im trying to make draggable objects align to each other from far.
its allmost done but the thing that is not working is if you watch carefully at the example, the helpers are 1 move behind.. if u move it 1 pixel up the helpers will go to the -1 place u were.. and only next move be where your mouse was :(
hope u understand HERE IS A WORKING CODE (DEMO)
any ideas what is wrong with it?
i think the problem is in this part but i dont know what to change that will work without this bug:
drag: function(event, ui) { drawGuideLines($(this)); },
start: function(event, ui) { removeAlignLines($(this)); },
stop: function(event, ui) {
rebuildAlignLines($(this));
linesTimeout = setTimeout("hideGuideLines()", 100);
},

Answer 1

Sounds like a bug, the drag event is not called after the last move. The problem is very visible if the user move the mouse quickly.
As workaround, you could set up an interval function durring the dragging time and draw the grid lines every 100ms :
Update jsbin : http://jsbin.com/oqohuq/4/edit
var handleInterval = null;
$(".draggable").draggable({
opacity : 0.35,
handler : "._header",
stack : ".draggable",
grid: [1, 1],
refreshPositions: true,
snap: ".drag_alignLines", // Setting snap to alignment lines
snapTolerance: 10,
snapMode: "inner",
drag: function(event, ui) { drawGuideLines($(this)); },
start: function(event, ui) {
//Init the interval here
var self = $(this);
handleInterval = setInterval(function(){ drawGuideLines(self);},100);
removeAlignLines($(this)); },
stop: function(event, ui) {
//Clear interval here
clearInterval(handleInterval);
rebuildAlignLines($(this));
linesTimeout = setTimeout("hideGuideLines()", 100);
}//Don't forget to remove the last coma!
});