If an item was not dragged to a specific location, then have it go to back to original position?

Question

I made a quick drag and drop type menu. Basically I made it so you drag an item from a list into the trash div, and it will give you an alert saying "gone"

I want to make it so that you can't just drag the item anywhere. It has to go into the trash or ".list4" it's called, or else send it back to it's 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'm here, would there be a way to delete the item once it goes in the "trash"?

score 3 · Answer 1 · answered May 14 '13 at 00:04

3

Try this

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

JS Fiddle Demo

answered May 14 '13 at 00:04

Sachin

40,216
7
90
102

Shlomi Hassid · Answer 2 · 2013-05-14T00:56:14.663

3

use :

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

to get it back to its original position.

use:

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

to remove an element dropped.

HERE IS A DEMO : jsfiddle

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

edited May 14 '13 at 00:56

answered May 14 '13 at 00:05

Shlomi Hassid

6,500
3
27
48

im creating your jsfiddle in a sec – Shlomi Hassid May 14 '13 at 00:07
Thanks, the first code works. Although I can't get the code to remove the item to work. – Bradley Mitchell May 14 '13 at 00:14

If an item was not dragged to a specific location, then have it go to back to original position?

2 Answers2