2012-05-14 50 views
0

ドラッグアンドドロップで削除するコードを作成します。その後、ユーザは、ゴミ箱にアイテムをドラッグすることができ確認がそれを削除した場合、メッセージを確認して、ユーザーが項目を私下さいjQuery Drop元の位置に戻す

//drag code 
var a = 3; 
     $('#dragZone .box,#dragZone .box1,#dragZone .box2').draggable({containment:".invitemain"}, { 
      start:function (event, ui) { 
       $(this).css("z-index", a++); 
      }, 
      stop:function() { 
       var id = $(this).attr("mid"); 
       var x = $(this).position().left; 
       var y = $(this).position().top; 
       var z = $(this).css("z-index"); 

//send request to server to save the position 
       $.get('/users/savecodes?mid=' + id + '&x=' + x + '&y=' + y + '&z=' + z, function (data) { 
        //alert(data);  
       }); 

      }  
     }); 

//drop code 
$("#trash").droppable({ 
      tolerance: 'touch', 
      drop: function(ev, ui) { 
       var answer = confirm('Permanently delete this item?');     
       if(answer){ 
        //call some ajax for delete 
       $(ui.draggable).remove(); 
       } 
       else{ 
        //move to original position 
       } 

      } 
     }); 
+0

'' 'revert'''オプションを使います。 '' 'draggable''を作成するときに渡すか、' ''(my-selector ')。draggable(' option '、revert、true); '' 'を使ってその場で設定します。 –

答えて

-1
function stopDrag{ 
$("#trash").draggable({ cancel: "button" }); 
} 

とあなたの関数呼び出しを助け、元の位置に行く必要が削除を確認していない場合にしたい来ます

$(ui.draggable).remove(); 
      } 
      else{ 
       stopDrag(); 
      } 

私はこれは私がそれを自分で試していないが、私は、このリンクをチェックする仕事かもしれないと思う:http://jqueryui.com/demos/draggable/#option-cancelので試しにそれを

を与えると、このリンクをチェックするも、それはyが何であるかだけですあなたが探しているもの:http://www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/

関連する問題