jQuery UI - cómo restaurar el arrastrable arrastrable

Question

Tengo 3 Divs que puedo arrastrar a una imagen de un bote de basura. Una vez que el usuario suelta el ratón del Div se deja caer de lo contrario, se revierte a su ubicación original, aquí está mi código:

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

      }); 
     } 

    }); 

}); 

también aplico un activeClass a la imagen de la papelera para que el usuario se da cuenta de que pueden arrastrar/la funcionalidad está activa. Sin embargo, me gustaría extender mi código para que cuando se suelte una Div se restaure a su posición original dentro de la Div. "Draggables". No estoy seguro si usar un clon de ayuda en los elementos que se pueden arrastrar o dentro de la función de alguna manera agregar a la div "draggables". ¿Alguien tiene algún consejo? ¿Hay algún método como el ui.draggable.restore(); que pueda usar?

Si mi redacción es mala, por favor, hágamelo saber y volveré a formular la pregunta.

Answer 1

creo que busca la opción revert:
http://jqueryui.com/demos/draggable/#option-revert

Answer 2

ayudante: "clon" es el camino a seguir y cuando se haya decidido si para sacarlo de la ubicación original que acaba de quitar usando .Remove()

Answer 3

Aparte del hecho de que la imagen no quiere ser un lanzables, el guión parece funcionar ...

ver este JSFiddle.

Answer 4

Aquí hay un pequeño código que adopté para usar en mis proyectos.

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

    } 
    }); 
}); 

Espero que ayude ..