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:
I am desperate for any help.
thanks
To be a little more specific:
$item.find( "a.ui-icon-trash" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$item
.animate({ width: "48px" })
.find( "img" )
.animate({ height: "36px" });
$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.
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.
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.
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.
// image deletion function
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
}