jQuery UI - ドロップされたdraggableを復元する方法

Question

私はゴミ箱の画像にドラッグできる3つのDivを持っています。ユーザーは本部がそうでなければ廃棄され、それが元の場所に戻され、マウスを解放したら、ここに私のコードです：ユーザーは、彼らがドラッグできることを実現して私もゴミ箱のイメージにactiveClassを適用

<div id="draggables"> 
    <div id="d1"> 
     <header>A</header> 
    </div> 
    <div id="d2"> 
     <header>B</header> 
    </div> 
    <div id="d3"> 
     <header>C</header> 
    </div> 
</div> 


<img src="trash.jpg" id="trash" class="semitransparent" /> 

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> 
<script> 

$(function(){ 
    // draggables... 

    $("#d1,#d2,#d3").draggable({ 
     revert:"invalid" 
    }); 

    $("#trash").droppable({ 

     activeClass:"opaque", 
     drop: function(event, ui){ 

      ui.draggable.fadeOut(function(){ 
       ui.draggable.remove(); 

      }); 
     } 

    }); 

}); 

/機能はアクティブです。しかし、私はDivを落としたときにそのコードを拡張したいのですが、それは "draggables" Div内の元の位置に復元されます。ドラッグ可能な要素や関数内でヘルパークローンを使用するかどうかは、「draggables」ディビジョンに何らかの形で追加するかどうかわかりません。誰にもアドバイスはありますか？次のような方法がありますか：ui.draggable.restore();私は使用できますか？

私の言葉が悪い場合は、私に知らせてください、私は質問をし直すでしょう。
http://jqueryui.com/demos/draggable/#option-revert

Answer 1

「クローン」は、進むべき道であり、あなたが元の場所からそれを削除するかどうか、あなたの決心をしたときに、ちょうど使用してそれを削除します.remove（）

Answer 2

ヘルパー：私はあなたがrevertオプションを探していると思う

Answer 3

別に画像がドロップ可能であることを望んでいないという事実から、スクリプトが動作しているようです...

このJSFiddleを参照してください。

Answer 4

ここに私のプロジェクトで使用するために採用した少しのコードがあります。

HTML：

<div class="N_COn_USER" name="moh1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

<div class="N_COn_USER" name="demo1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

<div class="N_COn_USER" name="foo1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

のjQuery：

$(document).ready(function() { 

    var id ; 
    id = $(".N_COn_USER").draggable({ // the draggable div 
    revert: true, 
    helper: "clone", 
    start: function(event, ui) { 
    id = $(this).attr("name"); // we name each draggable item with its ID or any unique identifier. And here, we grab that value .. 
    } 
}).attr("name"); 

    $("#dropable_file").droppable({ 
    tolerance: 'touch', 
    drop: function() { 

    var agree=confirm('Permantly delete '+ id2 +"?"); 
    if (agree) { 
     $.ajax({ 
     url: 'unfollow', 
     data: 'u=' + id, // we send that ID to a processing page controller 
     type: 'post', 
     success: function(msg){ 
      if(msg == 'bad') // Message Sent, check and redirect 
      {    // and direct to the success page 
      $("#msgbox").html('').addClass('good'); 
      $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox 
      { 
       //add message and change the class of the box and start fading 
       $(this).html('Tcxfgg').removeClass().addClass('error').fadeTo(300,1); // if not deleted, show an error! 

      });  
      } 
      else // if everything went perfectly 
      { 
      $("div[name="+id+"]").fadeOut("slow"); // the item with that unique name gets faded out on success. 
      $("span[name="+id+"]").fadeOut("slow"); // picture of it also should have its own name if it lives outside that DIV. 


      } 
     } 
     }); 

    } else { 
     return false; 
    } 

    } 
    }); 
}); 

私はどのように私は再びそれを使用して示唆している、私のdraggablesでこれを使用してい