JQuery UI - how to recover a dropped drag and drop

Question

I have 3 Divs that I can drag onto the garbage image. As soon as the user releases the mouse, the Div is discarded, otherwise it returns to its original location, here is my code:

<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 also apply activeClass to the trashcan image so that the user understands that they can drag / drop functionality. However, I would like to expand my code, so when the Div crashes, it returns to its original position in the div's drag and drop. I'm not sure whether to use the helper clone for draggable items or inside a function, somehow add to the "draggables" Div. Anyone have any advice? Is there a way, for example: ui.draggable.restore(); I can use?

If my wording is poor, please let me know and I will reinforce the question.

Answer 1

I think you are looking for the revert option:
http://jqueryui.com/demos/draggable/#option-revert

Answer 2

Besides the fact that the image does not want to be inaccessible, the script seems to work ...

See JSFiddle .

Answer 3

Here is a little code that I used for my projects.

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

I hope this helps.

Answer 4

helper: "clone" is the way to go, and when you decide whether to remove it from the source, just delete it with .remove ()