SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Simple photo manager- JQuery [REPOST]

    Hi guys,

    I want to use this exact UI widget:

    jQuery UI - Droppable Demos & Documentation

    But I want it to be sortable too(just the gallery part), does anyone know how to do that. Atm when I make it sortable, it will not drop properly to the trash keeps dropping in the gallery instead.


    My page:

    Jake News

    I am desperate for any help.


    thanks
    "Persistence is the path to perfection"

  2. #2
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be a little more specific:

    [CODE]

    $item.find( "a.ui-icon-trash" ).remove();
    $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
    $item
    .animate({ width: "48px" })
    .find( "img" )
    .animate({ height: "36px" });
    [CODE]

    $item is the current dropppable object, the variable $list above should be the UL inside #trash, therefore the last chained command should simply append $item to $list.

    However, there is some sort of strange propagation going on where the item seems to be dropped in #trash ul but instead of staying in there, it moves back into #Gallery UL. It seems to perform the animate() part of the chain when it has moved back to the gallery which is just bizarre.
    "Persistence is the path to perfection"

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I have elaborated on what I had and can now drop to the trash but I cannot drop properly from the trash next to the gallery.

    Connected sortable

    The FX chain does not seem to execute properly when I call the recycle() function. It doesn't really make sense as the code is not different to the original.

    Code:
    		var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
    		function recycleImage( $item ) {
    			$item.fadeOut(function() {
    				$item
    					.find( "a.ui-icon-refresh" )
    						.remove()
    					.end()
    					.css( "width", "96px")
    					.append( trash_icon )
    					.find( "img" )
    						.css( "height", "72px" )
    					.end()
    					.appendTo( $gallery )
    					.fadeIn();
    			});
    		}
    Notice that I have used the wrap function to replace the previous code below. This isn't really the bet solution either as both the gallery and the trash should append to an existing ul list and not wrap each item in a new one.

    Code:
    	// image deletion function
    
    				var $list = $( "ul", $trash ).length ?
    					$( "ul", $trash ) :
    					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
    
    		}
    "Persistence is the path to perfection"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •