sarahedgehog
New Member
I'm having a problem with dragging a div inside an other div element.HTML looks like this:\[code\]<div id="grid"> <div id="el1" style="width:300px"></div> <div id="el2" style="width:100px"></div> <div id="el3" style="width:100px"></div> <div id="el4" style="width:100px"></div></div>\[/code\]All elements are draggable and have the css style \[code\]float:left;position:relative;\[/code\].When I drag \[code\]el1\[/code\] to the place of \[code\]el3\[/code\] it will work, but of course it will overlap the element \[code\]el3\[/code\].The draggin \[code\]jquery draggable\[/code\] is working fine but I want to insert div with id \[code\]el1\[/code\]at the HTML code in this position.That it will look like this:\[code\]<div id...> <div id="el2... <div id="el3... <div id="el1... <div id="el4...</div>\[/code\]My problem now is, that this is a grid. \[code\]el1\[/code\] has the width of '300' all other the width of '100'. Dragin \[code\]el1\[/code\] to the place of \[code\]el3\[/code\] should swap \[code\]el2\[/code\], \[code\]el3\[/code\] and \[code\]el4\[/code\] to the place of \[code\]el1\[/code\] and \[code\]el1\[/code\] to the place of \[code\]el2, el3, el4\[/code\].To get this behaviour I think I'm needed to move the \[code\]div\[/code\] HTML code after \[code\]el4\[/code\]. But how to determine which element is the nearest? ------- UPDATED-------I way trying to use sortable... see here http://jsfiddle.net/vwK5e/2/But if you put the red box over number 3, the red box will be in the second line (correct) but number 4 should be next to number 3 cause of the empty space.TIAfrgtv10