[jQuery]實作JQuery UI drag and drop

實作drag and drop：
將drag目標拖曳至drop目標時，內容會互換。

var $a_droppableObject,b_draggableObject_html,$b_droppableObject,a_draggableObject_html; $('.drop').droppable({ scope:'sc', torlerance:'pointer', over:function(e,ui){ $(this).css('background-color', '#90F'); b_draggableObject_html = $(this).html(); $b_droppableObject =$(this); }, out:function(e,ui){ $(this).css('background-color', '#FFC'); }, drop:function(e,ui){ $(this).css('background-color', '#FFF').siblings().css('background-color', '#FFC'); if(b_draggableObject_html!='' && a_draggableObject_html!='') { $b_droppableObject.html(a_draggableObject_html); $a_droppableObject.html(b_draggableObject_html); $a_droppableObject.children().removeClass().addClass('drag').draggable({ addClass:false, revert:'invalid', scope:'sc', stack:".drag", helper:'clone', opacity:0.35, start:function(e,ui){ a_draggableObject_html = $(this).parent().html(); $a_droppableObject = $(this).parent(); }//end of start }); //end of draggable function $b_droppableObject.children().removeClass().addClass('drag').draggable({ addClass:false, revert:'invalid', scope:'sc', stack:".drag", helper:'clone', opacity:0.35, start:function(e,ui){ a_draggableObject_html = $(this).parent().html(); $a_droppableObject = $(this).parent(); }//end of start }); //end of draggable function //remove clone object $b_droppableObject.children().each(function(){ if($(this).css('opacity')==0.35) $(this).remove(); }); $b_droppableObject=null; $a_droppableObject=null; b_draggableObject_html=''; a_draggableObject_html=''; }//end if function } }); $('.drag').draggable({ addClass:false, revert:'invalid', scope:'sc', stack:".drag", helper:'clone', opacity:0.35, start:function(e,ui){ a_draggableObject_html = $(this).parent().html(); $a_droppableObject = $(this).parent(); }//end of start });