Figured it out. Had to make sure that in the event delegation I only
run the deleteImage() function if the parent element (the list item)
has the class 'draggable'. Amended code:
// 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')) {
if( $target.parent().hasClass('draggable') ) {
deleteImage($item);
} else {
alert( 'The trash is full!' );
}
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
On Aug 25, 4:36 pm, tatlar <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
