So I figured it out, but there are glitches. Here is what I did. I
have a counter that gets incremented when the user drags a photo into
the trash. When that counter reaches a set amount (5 in this case) I
have a jQuery each() call iterate over all the elements in the list.
This does two things:
(1) If it encounters a list element with the class 'draggable-
nonvalid' (I have some list elements I don't want to have draggable
behavior by default), it creates a new attribute 'rel' and assigns the
value 'true'
(2) Any other list element, it assigns the class 'draggable-nonvalid'.
This renders ALL list items non-draggable.
When the recycle icon is hit (ie. the photo is removed from the trash
and put back in the list), the trash counter in decremented. I have a
jQuery each() call to again iterate over all the list elements. This
does:
(1) If it finds an attribute 'rel' with a value 'true', it removes
that attribute.
(2) All other list items get the 'draggable-nonvalid' class removed,
and the class 'draggable' reapplied.
Here is the code for making all list elements non-draggable if the
trash has five items in it ($trashsize):
if( $trashsize >= 5 ) {
$( '#gallery li').each( function(i) {
if( $(this).hasClass('draggable-nonvalid') ) {
$(this).attr('rel','true');
} else {
$(this).removeClass('draggable').addClass('draggable-
nonvalid');
}
});
}
And here is the code for reapplying the default draggable and non-
draggable classes when the trash has less than five items in it once
more:
if( $calibstalen >= 5 ) {
// make sure we make stations still non-draggable
$( '#gallery li').each( function(i) {
if( $(this).attr('rel') == "true" ) {
$(this).removeAttr('rel');
} else {
$(this).removeClass('draggable-nonvalid');
$(this).addClass('draggable');
}
});
}
There is a problem with respect to the thumbnail photos in the album.
Clicking the trash icon in the bottom right adds to the trash, and it
does increment the trash counter, but it does not fire off the CSS add
and remove class to make the icons draggable and non-draggable. No
idea why. Do I need to reinitialize the droppable setup now that the
css classes have changed? I seem to remember having to do this with
other jQuery plugins when the underlying attributes (that control
behavior) are modified.
On Aug 24, 4:31 pm, tatlar <[email protected]> wrote:
> I have a simple draggable and droppable list that essentially uses the
> code from the jQuery UI docs ('simple photo
> manager'):http://jqueryui.com/demos/droppable/#photo-manager
>
> How would I go about limiting the number of items in the droppable
> target div? For example, in the simple photo manager linked above, say
> I want to limit the number of items that get put in the trash to two.
> If the user then drags another photo into the trash (photo number 3),
> it does not get accepted.
>
> I have looked at the excepted elements example (http://jqueryui.com/
> demos/droppable/#accepted-elements) which I guess could be a method:
> if the number of items in the trash is two, then change the class on
> all the other remaining photos to be non-droppable. If the number of
> items in the trash is less than two, then keep the class assignment as
> droppable.
>
> Does this seem like a good approach? Thanks in advance.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
