Sorry. The problem lies in the event delegation at the foot of the
photo album example:
// resolve the icons behavior with event delegation
$('ul.gallery > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-trash')) {
deleteImage($item);
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
This does not follow the non-draggable and non-droppable rules that I
have set up when the trash gets 5 items in it. Has anyone else seen
this behavior with event delegation? Do I need to reinitialize the
rules for which classes are not draggable and droppable in the icon
event delegation?
On Aug 25, 4:21 pm, tatlar <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
