jQuery UI - düşürülmüş sürüklenebilen öğe geri yükleme

Question

Bir çöp kutusunun görüntüsüne sürükleyebileceğim 3 Bölüme sahibim. Kullanıcı Div aksi düşürülür orjinal konumuna geri alınırsa fareyi serbest kez burada benim kod: Kullanıcının, sürükleyebilir fark yüzden de çöp tenekesi görüntüye bir activeClass uygulamak

<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(); 

      }); 
     } 

    }); 

}); 

/işlevsellik aktif. Ancak kodumu genişletmek istiyorum, böylece bir Div düştüğünde, "sürüklenebilir" Div içindeki orijinal konumuna geri yüklenir. Sürüklenebilir öğeler üzerinde yardımcı bir klonun kullanılıp kullanılmayacağına veya bir şekilde "sürüklenebilir" Div'e ekleyeceğine emin değilim. Herhangi bir tavsiyesi olan var mı? ui.draggable.restore(); gibi bir yöntem var mı?

Ifadelerim kötü ise lütfen bana bildirin ve sorumu tekrar edeceğim.
http://jqueryui.com/demos/draggable/#option-revert

Answer 1

Sana revert seçenek arıyor düşünüyorum .Gergi() dışında resim droppable olmak istemiyor olmasından

Answer 2

yardımcı: "klon" gitmek yoludur ve size kararını ne zaman sadece kullanarak kaldırmak orijinal konumundan çıkarmak için ister

Answer 3

, senaryo

bu JSFiddle bakınız ... çalışıyor gibi görünüyor.

Answer 4

Projelerimde kullanmayı benimsemediğim küçük bir kod.

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; 
    } 

    } 
    }); 
}); 

O yardımcı olur umarım .. benim Draggables ile bunu kullanıyorum