I’m having a problem with dragging a div inside an other div element. HTML

Question

0

Editorial Team

Asked: June 7, 20262026-06-07T19:45:33+00:00 2026-06-07T19:45:33+00:00

I’m having a problem with dragging a div inside an other div element. HTML

0

I’m having a problem with dragging a div inside an other div element.

HTML looks like this:

<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>

All elements are draggable and have the css style float:left;position:relative;.
When I drag el1 to the place of el3 it will work, but of course it will overlap the element el3.
The draggin jquery draggable is working fine but I want to insert div with id el1at the HTML code in this position.

That it will look like this:

<div id...>
    <div id="el2...
    <div id="el3...
    <div id="el1...
    <div id="el4...
</div>

My problem now is, that this is a grid. el1 has the width of ‘300’ all other the width of ‘100’. Dragin el1 to the place of el3 should swap el2, el3 and el4 to the place of el1 and el1 to the place of el2, el3, el4.

To get this behaviour I think I’m needed to move the div HTML code after el4. 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.

TIA
frgtv10