CODEWITHSUNDEEP
javascriptjquery-ui
Ray Suelzer
Ray Suelzer

Reputation: 4107

jqueryUI - drag item to multiple lists

My scenario is that I have a list of peoples names contained as list items and I want to be able to drag those names into boxes. I got this part working through jqueryUI, but my issue is that when the name is dragged to the box, I don't want it to be moved out of the original list because a person can be in more than one list.

I assume the issue is that I am using .appendTo instead of .add, but it's clearly not as simple as just switching .appendTo to .add

$( this ).appendTo( $list ).show( "slow" );

Entire code:

$(function() {
    $( "#sortable1, #sortable2, #sortable3" ).sortable().disableSelection();

    var $tabs = $( "#tabs" ).tabs();

    var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {
            var $item = $( this );
            var $list = $( $item.find( "a" ).attr( "href" ) )
                .find( ".connectedSortable" );

            ui.draggable.hide( "slow", function() {

                $( this ).appendTo( $list ).show( "slow" );



            });
        }
    });
});

Please see the fiddle below for the working example and HTML markup.
http://jsfiddle.net/sXRKd/1/

Gracias!

Upvotes: 3

Views: 241

Answers (1)

Rajagopal 웃
Rajagopal 웃

Reputation: 8471

Hope, When you are dropped one person into other, it must be avail in both place. For example when you drop josh mondie into Close Friends it must to avail in both All Friends and also Close Friends.

Take a look at this fiddle, where it's working fine.

Code,

drop: function (event, ui) {
      var $droppableId = $("a", this).attr("href");
      var $newList = $(".connectedSortable", $droppableId);

      ui.draggable.hide("slow", function () {
        $newList.append(ui.draggable.clone().show());
      });
      ui.draggable.show("slow");
    }

Upvotes: 1

Related Questions