Having Jquery sortable within droppable and draggable

Question

I am currently working on a feature where I need to combine droppable, draggable and sortable feature all at the same time. Below is my test code. I am sorry since I was not able to get jsfiddle for this code. Droppable and Draggable is working fine.

Problem: I am getting hard time to get horizontal sort within my droppable div. I would appreciate if someone can help/guide me to get that along with the index/position of the element in the sorted list whether the element is at 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 I am using as a test data.

JQuery: Below is the Jquery code I am 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 do let me know if there is something I am missing and failed to post correct question. I did some research on stackoverflow but still couldn't find the exact solution. Thank you very much in advance.

update jsfidde: http://jsfiddle.net/mw3Pn/ – Anh Tú Apr 06 '13 at 04:18 — Anh Tú, Apr 06 '13 at 04:18

score 2 · Answer 1 · answered Apr 06 '13 at 04:36

2

Use 2 sortable and set connectWith property to each other:

var $gallery = $("#gallery"),
    $trash = $("#trash");
$("#gallery").sortable({
    connectWith: "#trash",
    helper: "",
    revert: "invalid",
    start: function (event, ui) {
        var $item = ui.helper;
        $item.css({
            'width': $('#gallery li').width()
        });
    },
    stop: function (event, ui) {
       //get what you want here
    }
});

$('#trash').sortable({
    placeholder: "ui-state-highlight",
    connectWith: '#gallery',
    revert: true,
    cursor: "move",
    items: "li",
    drop: function (event, ui) {

    },
    stop: function (event, ui) {
        var $obj = $(ui.item);
       //get what you want here
    }
});

try working fiddle:

http://jsfiddle.net/mw3Pn/2/

answered Apr 06 '13 at 04:36

Anh Tú

636
7
21

Its kinda working coz now you are using 2 sortable list & I was using drag/drop. Jquery UI shows both these ways. But there are few things which I guess none of our solutions are supporting. I would appreciate if you could help me in guiding those as shown below. This is the first time I am using drag/drop/sortable feature of Jquery UI so trying my best to bang on it. – user1704440 Apr 08 '13 at 23:52
1. In your solution both are sortable list. Is there a way I can make #gallery as un-sortable and only trash list as sortable...? 2. Whenever I drop anything from #gallery or sort anything within #trash, is it possible to get the location/position I am dropping at?? I think I am on the right track for these by using ui.item.index() on every event? – user1704440 Apr 08 '13 at 23:53

Having Jquery sortable within droppable and draggable

1 Answers1