jQuery UI

要素の並べ替えとドラッグ＆ドロップ●http://allabout.co.jp/gm/gc/24172/を参考

jQuery.noConflict(); //他のライブラリとの衝突を回避します

jQuery(function($) {

  $('#myDrag').draggable();

  $('#myDrop').droppable({
    accept: '#myDrag',
    drop: function(event,uis) {
      var msg   = "<p>"+ event.target.id
                + " が "+this.id
                + " へドロップされました</p>"
      $(this).append(msg);
    }
  });

});

CSS設定

#myDrag { 
  width   : 100px   ; 
  height  : 100px   ; 
  padding : 10px    ; 
  background-color : #B9FF04 ; 
  float   : left;
}
#myDrop { 
  width   : 300px   ; 
  height  : 200px   ; 
  padding : 10px    ; 
  background-color : #eee ; 
  float   : right;
}

<div id="myDrag">ドラッグできます</div>
<div id="myDrop">ドロップしてください</div>
<br clear="all">