Limit number of draggables allowed in a droppable

[Jason Whitmer]

How do I limit a Droppable to contain only 1 Draggable?

I have a Droppable:

<div id="myDroppable">
<div id="staticText">Description</div>
</div>

And a Draggable:

<div id="myDraggable">
DRAG ME
</div>

Which I setup like this:

Droppables.add('myDroppable');

new Draggable('myDraggable');


Thank you,
Jason

[Alex McAuley]

If i recall correctly there is an onDrop function that you can call when
initialising the droppable...

So what i would do is ondrop count the elements with the classname that are
inside the droppable... or even easier .. ondrop update a hidden element on
the page to the value of the number of dropped elemenets in it and ondrop
also check that hidden value and not let it drop if its more than 1

Both will work

HTH




Alex Mcauley
http://www.thevacancymarket.com

> --
>
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-s...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=.
>
>
>

[Jason Whitmer]

That does work. Thank you.

However I use a hoverclass in my droppable, so users can see which
items they are allowed ot drop in and which they cannot. I didn't show
that in my example.

Incorporating your change and the hoverclass is below:

<style>
.hover { border: solid 1px red; }
</style>

Droppables.add('myDroppable',{hoverclass:'hover', onDrop: drop);
new Draggable('myDraggable');

function drop(dragged, dropped, event)
{
if (dragged.element.parentNode.childNodes.length > 2) // 2 because
of the static div
{
dropped.appendChild(dragged);
// do something to disable the hoverclass
// Droppables.remove(dropped); // possible solution
}
}

However the problem with this is how do I re-enable the hoverclass (or
droppable) when the draggable is removed?

I've tried onEnd events on the draggables to re-enable but haven't
gotten that to work.I should also mention that I have many draggables
and many droppables (determined at run time).

Thanks,
Jason





On Nov 19, 5:32 pm, "Alex McAuley" <webmas...@thecarmarketplace.com>
wrote:

> If i recall correctly there is an onDrop function that you can call when
> initialising the droppable...
>
> So what i would do is ondrop count the elements with the classname that are
> inside the droppable... or even easier .. ondrop update a hidden element on
> the page to the value of the number of dropped elemenets in it and ondrop
> also check that hidden value and not let it drop if its more than 1
>
> Both will work
>
> HTH
>

> Alex Mcauleyhttp://www.thevacancymarket.com