I am currently working on a function in which I need to combine droppable, draggable and sortable at the same time. Below is my test code. I'm sorry because I could not get jsfiddle for this code. Droppable and Draggable works fine.
Problem: I find it hard to find horizontal sort in my divppable div. I would appreciate if someone helped me / helped me get this together with the index / position of the item in the sorted list, whether the item is in the 1st, 2nd, etc. position.
HTML:
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> <li class="ui-widget-content ui-corner-tr"> <div class="ui-widget-header">High Tatras 1</div> </li> <li class="ui-widget-content ui-corner-tr"> <div class="ui-widget-header">High Tatras 2</div> </li> <li class="ui-widget-content ui-corner-tr"> <div class="ui-widget-header">High Tatras 3</div> </li> <li class="ui-widget-content ui-corner-tr"> <div class="ui-widget-header">High Tatras 4</div> </li> </ul> <div id="trash" class="ui-widget-content ui-state-default"> <ul id = "sortable" class='gallery ui-helper-reset sortable'></ul> </div>
Above is the HTML code that I use as test data.
JQuery: The following is the jQuery code I'm currently using.
var $gallery = $( "#gallery" ), $trash = $( "#trash" ); // let the gallery items be draggable $( "li", $gallery ).draggable({ cancel: "a.ui-icon", // clicking an icon won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }); // let the trash be droppable, accepting the gallery items $trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function( event, ui ) { addToContainer( ui.draggable ); } }); // let the gallery be droppable as well, accepting items from the trash $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function( event, ui ) { RemoveFromContainer( ui.draggable ); } }); function addToContainer( $item ) { $item.fadeOut(function() { var $list = $( "ul", $trash ); $item.appendTo($list).fadeIn(function() { $item .addClass('ui-state-default') .find( "div .ui-widget-header" ) .animate({ height: "36px"}); }); }); $( ".sortable" ).sortable({ connectWith: "#sortable" }).disableSelection(); } function RemoveFromContainer( $item ) { $item.fadeOut(function() { $item .find( "a.ui-icon-refresh" ) .remove() .end() .css( "width", "96px") .find( "img" ) .css( "height", "72px" ) .end() .appendTo( $gallery ) .fadeIn(); }); } // resolve the icons behavior with event delegation $( "ul.gallery > li" ).click(function( event ) { var $item = $( this ), $target = $( event.target ); if ( $target.is( "a.ui-icon-trash" ) ) { addToContainer( $item ); } else if ( $target.is( "a.ui-icon-refresh" ) ) { RemoveFromContainer( $item ); } return false; });
Please let me know if there is something that I don’t see and could not post the correct question. I did some research on stackoverflow but couldn't find the exact solution. Thanks a lot in advance.