I have a grid of 9 squares and i need 2 squares to swap places on each drag/drop (this is why i cannot use "sortable").
I can get to the point where i can drag/drop each square only once - after they have been dropped they lose functionality... How can I make them keep this drag/drop functionality after the first drop?
Here is [JSFiddle](http://jsfiddle.net/skunksts/CrwcL/19/)

HTML

```
<div id="grid">
    <div class="block one"></div>
    <div class="block two"></div>
    <div class="block three"></div>

    <div class="block four"></div>
    <div class="block five"></div>
    <div class="block six"></div>

    <div class="block seven"></div>
    <div class="block eight"></div>
    <div class="block nine"></div>    
</div>

```

JS

```
$(document).ready(function () {
    $(".block").draggable({
        helper:"clone"
    })

    $(".block").droppable({
        drop: function(ev, ui) {
            $(ui.draggable).clone().replaceAll(this);
            $(this).replaceAll(ui.draggable);
        }
    })
})

```

CSS

```
.block.one { background-color: blue; float:left;}
.block.two { background-color: red; float:left;}
.block.three { background-color: green; float:left;}

.block.four { background-color: yellow; float:left;}
.block.five { background-color: pink; float:left;}
.block.six { background-color: black; float:left;}

.block.seven { background-color: grey; float:left;}
.block.eight { background-color: brown; float:left;}
.block.nine { background-color: orange; float:left;}

.block { 
    height: 40px; 
    width: 40px;
}
#grid {
    width: 120px;
    height: 120px;
}

```