javascript - Jqueryのドラッグ/ドロップ可能およびソート可能の組み合わせ

Question

正方形のグリッドを作成するように依頼されました。各正方形にはリンクが含まれている場合と含まれていない場合があり、これらのリンクはグリッド内を移動できる必要があります。

ドラッグ可能/ドロップ可能が進むべき道であり、正常に機能すると考えましたが、ドラッグ可能なものを別のものの上にドロップした場合に、ドラッグ可能なものを交換できるようにしたいと考えています。そのため、ソート可能が進むべき道だったようです。ただし、ソート可能は、リストのように書いていないのに対し、リスト用のように見えます。

これまでの作業を簡単に行う方法はありますか、それとも sortable を使用してこれを完全に書き直す必要がありますか? 私は JavaScript が初めてで、ここまで来るのに時間がかかりました。コードを要求しているわけではありませんが、すべてをもう一度理解しなければならないという考えを恐れています! 何か意見はありますか？

これが私のコードのフィドルです: http://jsfiddle.net/kvVkT/

そしてコード：

html

<div id="gridcontainer">
    <div id="-2:-2" class="droppable occupied">
        <a href="" id ="508" class="bookmark draggable white" title="white" "target="_blank">1</a>
    </div>
    <div id="-2:-1" class="droppable">2</div>
    <div style="clear:both"></div>
    <div id="-2:0" class="droppable">3</div>
    <div id="-2:1" class="droppable occupied">
        <a href="" id ="567" class="bookmark draggable white" title="white" "target="_blank">4</a>
    </div>
    <div style="clear:both"></div>
</div>

CSS

#gridcontainer{position:relative;padding:25px;color:#ff0004;background:#ffffff;}
.droppable{width:65px; height:65px;float:left; margin:5px;background:#000000;}
.bookmark {float:left;width:65px; height:65px;display:block;position:absolute;}
.position{float:left;width:65px; height:65px;display:block;}
.position:hover{background-image:url(../img/tilehover.png);}
.bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;}
.draggable{ background:#888888;}
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

JavaScript

$('.draggable').draggable({ start: function() {$('#dropdownAddTile').slideDown();},  stop: function() {$('#dropdownAddTile').slideUp();}, containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
function handleDropEvent( event, ui ) {
      event.preventDefault();
      var draggable = ui.draggable;
      var droppable = $(this);
      var droppableId = $(this).attr("id");
      var draggableId = ui.draggable.attr("id");
      $('.draggable').draggable({containment: '#container', snap:'.droppable', snapMode:'inner', revert:'invalid',snapTolerance: 32});
      $('.droppable').droppable({drop: handleDropEvent, accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
      var initPosit = ui.draggable.parent().attr('id');
      //save new position
      $.post("tiles/updateTilePosition", { draggableId:draggableId, droppableId: droppableId }).done(function(data) {
         //alert(data);
      })
      $(this).addClass('occupied');
      ui.draggable.parent().removeClass('occupied');
      if($(ui.draggable).parent() !==$(this)){
            $(ui.draggable).appendTo($( this ));
      }
}

ありがたくいただいたご意見