simulate.js | Small footprint Javascript library | Frontend Framework library

I am trying to simulate the drag and drop simulation using jquery-simulate-ext plugin of jquery-ui.

Before I give the details of the scenario , let me show you the js fiddle here .

I have 3 columns of divs. In 1st column, I have 3 draggables with country names, in 2nd column 3 droppables of blank divs and in 3rd column 3 normal divs with city names . So after all the draggables from 1st column are dropped on 2nd cloumn , 2nd and 3rd column rows will make a sense of country-city relationship.

But the problem is after the simulation is done, 1st and 2nd draggables are dropped on expected droppables but 3rd draggable just sticks to the mouse instead of dropping on the droppable. To find the behaviour, after the js fiddle page mentioned above loads, just move your mouse cursor on the result section and you will see that a draggable is also moving along with the mouse. You have to click somewhere to make the draggable sit on the droppable or draggable section (depends on which area you are clicking ). This happens only in Firefox whereas in chrome, the draggable just moves along with the cursor only inside the appropriate droppable section and then sits inside that automatically.

What I want is: as with other draggables, the 3rd draggable should not move along with the moving of the mouse and should sit on the desired droppable automatically .

Explanation of code :

Every draggable div with class draggable_div has an attribute data-index (value 1,2,3 etc). Same scenario is true with the droppable divs (with class droppable_blank) . Now at the start of the JS code, I have the line :