I am trying to implement Drag and Drop using jQuery. I have three droppable areas on my screen and N draggables. One Droppable should have only one item dragged on it.
Having successfully implemented the simple drag n drop, I am not able to restrict dropping only ONE item on Droppable area.
Below are the things I tried to do but no luck yet.
1) I tried going through the Documentations but did not find API that would return me the count of existing object.
2) I also tried implementing the call-back accept() and then based on some flag returning false for the new item being dropped. This did not work because accept gets fired on all the draggable objects in the page. May be I did not understand the documentation and wrongly implemented it. But followed whatever has been given in the JQuery UI doc.
3) Another thing I tried is to disable the droppable area in "drop" call back and enable it again in "out" event. This approach failed because when I say droppable.disable() in "drop" event callback , it disables the draggable Item that is dropped on it as well. And after that I can move the droppable out of the draggable.
You haven't really given enough information to be able to help much.
amit punekar wrote:but did not find API that would return me the count of existing object.
What do you mean by this? Are you moving the draggable into the droppbale? Is that what you mean by "existing object"? If so, it should be easy to find out if the droppable already has an element in it or not.
Thanks for your reply.
Yes, I am moving draggable to droppable area. And I want to restrict it to one and only one.
I have implemented callbacks for the events "drop" and "out" and could retrieve the names of the draggables dropped on the droppable.
I am not sure if I know how do we find out if droppable already has an element in it. (In terms of API).
Additionally I would have to write this kind of logic in "accept" afaik the APIs. But this "accept" is fired for every draggable so not able to understand how I can use to write the restriction logic.
amit punekar wrote:I am not sure if I know how do we find out if droppable already has an element in it.
It should be easy to either check the child count of the parent, or simply write a jQuery selector that matches any dropped children. if the wrapped set isn't empty, an element has already been dropped.
posted 9 years ago
I have implemented this checking mechanism using a flag for the droppable.
Is there any other way as you mentioned to get child count of the parent . ( May be jQuery Core API. I will check that as well).
But the question remains if the FLAG is true(in my current implementation), how do I prevent another draggable from being dropped.
Is there anyway to prevent that?
thnx a lot