Question

I am trying to make a drag drop stage using Jquery, I am having problem that I want only a single item inside the droppable box. But right now, it is adding multiple items inside it. Here is my code.

$("#item_list_2" ).droppable({
        drop:
                function(e, ui)
                {
                    var param = $(ui.draggable).attr('src');
                    var div_id = '#'+ $(this).attr("id");

                    addlist(param,div_id);
                }
});

Where addlist() is a function which is creating item contents using ajax. I there any way that I can restrict my #item_list_2 to get only one droppable object.

Thanks

Answer 1

You can implement the accept option in droppable to disable it when you have an element already dropped (you have to implement that condition depending on your case):

$("#item_list_2" ).droppable({
        accept: function() {
            return elementsAlreadyDropped == 0;   //<-- Implement for your concrete case
        },
        drop:
                function(e, ui)
                {
                    var param = $(ui.draggable).attr('src');
                    var div_id = '#'+ $(this).attr("id");

                    addlist(param,div_id);
                }
});