If the item has not been dragged to a specific location, return it to its original position?

Question

I made a quick drag menu. I basically did this so that you drag an item from the list to the trash div and it will give you a warning saying "gone"

I want to make it so that you cannot just drag and drop an item anywhere. He must enter the basket or ".list4" that he called, or send it back to its original position.

Here is the JSFiddle: http://jsfiddle.net/Gdze8/

Here is the Javascript:

$( init ) function init() { $(".contentItem").draggable(); $(".list4").droppable( { drop: handleDropEvent }); } function handleDropEvent ( event, ui ) { var draggable = ui.draggable; alert("Gone") } 

Also, while I am here, will there be a way to delete an item as soon as it appears in the "recycle bin"?

Answer 1

try it

 $(".contentItem").draggable({ revert: 'invalid' }); 

JS Fiddle Demo

Answer 2

use:

  $( ".draggable" ).draggable({ revert: "invalid" }); 

to return it to its original position.

using:

  $( "#dorp" ).droppable({ accept: ".draggable", drop: function( event, ui ) { ui.draggable.remove(); } }); 

to remove the deleted item.

HERE DEMO: jsfiddle

AND YOU CAN USE {helper: "clone"}: jsfiddle2