File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Drag and Drop using jQuery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Drag and Drop using jQuery" Watch "Drag and Drop using jQuery" New topic
Author

Drag and Drop using jQuery

amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 511
Hi,
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.

Thanks in Advance,
Amit


Regards,
Amit
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60788
    
  65

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.

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 511
Hi Bear,
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.

thnks once again
amit
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60788
    
  65

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.
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 511
Hi Bear,
Thanks again.
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
amit
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60788
    
  65

Hints: .children(), and the accept option of droppables (which, hint-hint, doesn't have to be a static selector).
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 511
Hi,
Tried working with children() for the droppable, it does not return the dropped item(draggable) as the child of the container(droppable).

Also trying to work with a flag "haskid" as below but somehow not able to access that attribute in callback implementations.





Please let me know if I am trying to access the attributes and children() wrongly.

 
Consider Paul's rocket mass heater.
 
subject: Drag and Drop using jQuery
 
Similar Threads
gwt drag and drop problem
Drag and drop fail when called via ajax
drag n drop
file upload with Drag and Drop facility
Drag and drop dynamic elements