CODEWITHSUNDEEP
jqueryjquery-ui
c3cris
c3cris

Reputation: 1326

Drag and drop ui drop box limit

I deleted my last post and rephrasing my question completely. I want to limit a droppable to only take 1 draggable at a time

Example: I have 3 draggable boxes and 2 droppable target boxes. I am trying to limit the drop boxes to only accepting items at a time. I do not want to disable the drop box I want to determine how many you can drop on it to only 1. I want a solution that's expandable. I am also trying to keep track of where you drop the box.

Thank you for your help.

Upvotes: 0

Views: 2320

Answers (1)

Quincy
Quincy

Reputation: 4433

I think you need to provide a custom function for the accept option of droppable

http://jqueryui.com/demos/droppable/#option-accept

So it accept first dropped item and check if the drappable container already contains another item, return false so the next item would be rejected.

Since the draggable element is not physically moved to the droppable area after drop, it's quite hard to determinate it's existence in the droppable area. You can try to follow the example of the photo manager and actually move the dom element to the area after drop. http://jqueryui.com/demos/droppable/#photo-manager

So using the accept callback can check if the droppable area already contains one of the elements and reject if the answer is yes. I have used the photo manager to make an example here.

http://jsfiddle.net/Quincy/rAcWK/

Upvotes: 1

Related Questions