Jquery DaD (Drag and Drop)

Bonjour,

Je me permet de vous demander votre aide car je n'arrive pas a faire mon drag and drop de la facon que je voudrai parlons coté client pure.

Partez sur le principe d'un jeu de dame quand vous draggez un élement et que vous le dropper sur un element vide il s'y pose et disparait de sont ancien élément et quand il y'a déja un pion ils inverssent leurs position...

Voila ma structure

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function() {
        $( ".draggable" ).draggable({revert: 'invalid'});
        $( ".droppable" ).droppable({
            accept: '.correct',
            activeClass: 'correct',
            drop: function( event, ui ) {
                ui.draggable.remove();
            }
        });
    });
</script>
<?php for($i = 1; $i < 60; $i++):?>
<div class="contain-coin">
    <div class="droppable coin" >
        <img id="<?php echo $i;?>" class="draggable correct" src="/images/piece.png" />
    </div>
</div>
<?php endfor;?>
<div class="contain-coin">
    <div class="droppable coin"></div>
</div>

Merci a vous