CODEWITHSUNDEEP
javascripthtmlcssdrag-and-drop
Shh
Shh

Reputation: 309

Javascript: Re-arranging divs on a screen using drag and drop

I currently have 6 square blocks called 'tile' on my screen inside a div container, something like this:

<div id="Container">
    <div id="tile1" class="tile"> </div>
    <div id="tile2" class="tile"> </div>
    <div id="tile3" class="tile"> </div>
    <div id="tile4" class="tile"> </div>
    <div id="tile5" class="tile"> </div>
    <div id="tile6" class="tile"> </div>
</div>

Each square is 100px by 100px and floats left, to appear in 2 rows of 3. Each square contains it's tile number inside e.g. tile1 -> 1, tile2 -> 2.

I want to be able to drag and re-arrange these tiles.

For example,

If I drag tile 6 to position 1, tile 6 appears in position 1 and the other tiles are pushed along:

tile6 -> pos1

tile1 -> pos2

tile2 -> pos3

tile3 -> pos4

tile4 -> pos5

tile5 -> pos6

Upvotes: 0

Views: 1435

Answers (1)

Rahul
Rahul

Reputation: 300

You can use jQuery UI Sortable plugin. it hase same exact functionality. See this demo page.

https://jqueryui.com/sortable/

*Select display as grid example from right menu.

Upvotes: 1

Related Questions