2

I am trying to implement a drag and drop functionality in a learning application.

this is working good, dropping an item to a droppable area works just as it should.

// Adding drop function to each category
        jQuery.each(codes, function (index, value) {
            jQuery(value).droppable({
                drop: function (event, ui) {
                 //additional logic here
                }
            });
        });

But if I drag my items and leave them in an undroppable area then it stays there as well.

Help me to make the items droppable to certain divs only, If they are outside those regions then it should go back to the orignal position

I have made a sample fiddle:

Demo Fiddle

Community
  • 1
  • 1
Vinay Pratap Singh Bhadauria
  • 9,829
  • 3
  • 28
  • 49
  • have you had a look at [this post](http://stackoverflow.com/questions/1254665/jquery-draggable-droppable-how-to-snap-dropped-element-to-dropped-on-element) yet...? – benomatis Mar 28 '14 at 10:53
  • 1
    ... or better yet, isn't [this example](https://jqueryui.com/droppable/#photo-manager) of jQuery UI Droppable what you are looking for...? – benomatis Mar 28 '14 at 11:01

1 Answers1

2

As webeno noted in his comment, the jQuery UI Droppable docs give examples on how to make the draggable element revert back to it's original position if not placed onto a droppable area. I've modified your fiddle by adding the option to the draggable that is required to allow it to revert position when placed on an invalid (not droppable) area:

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

jsFiddle

filoxo
  • 8,132
  • 3
  • 33
  • 38