change item attribute when it change list-items container

Question

i have 2 sortable connected list-items and i want to make the item change his attribute when it change the list container (i mean by drag and drop the item from the first list items to the second one)and here is my code:

$(".column").sortable({
    connectWith:    $(".column") ,  
    placeholder:    'widget-placeholder',   
    cursor: 'move' ,
    helper: function (evt, ui) {
        return $(ui).clone().appendTo('body').show();
    },  
    dropOnEmpty: true,  
    zIndex: 10
});

$("#column2").droppable({
    out: function( event, ui ) {
        $(ui.item).attr("rel",'0');
    },
    over: function( event, ui ) {
        $(ui.item).attr("rel",'1');
    }
  });

Answer 1

You've made a good start, but there are a few things that need correcting, and some issues you may not have realised:

1. Your items are constructed thus:

    <li id="1" class="item"> <h3 rel="1">item1</h3> </li> 

   so you need to set the rel for the h3 element, but the code in your jsFiddle is:

    $("#column2").droppable({ drop: function( event, ui ) { $(this).find('.item').attr("rel",'0'); } }); 

   so this is finding all the elements under $(this) (ie the droppable) that have the class item - which corresponds to all the li elements. You need to use:

    ui.item.find("h3").attr("rel", "0"); 

2. Your sortable in your jsFiddle is:

    $(".column").sortable({ connectWith: $(".column") , placeholder: 'widget-placeholder', cursor: 'move' , // utiliser helper-clone pour que le sortable n'est donc pas contenue par un volet helper: function (evt, ui) { return $(ui).clone().appendTo('body').show(); }, dropOnEmpty: true, zIndex: 10 }); 

   the helper function isn't needed - you can just use helper: "clone" . I have added forcePlaceholderSize: true to my solution, because it provides useful feedback to the user in showing where the droppable is going to be dropped. If ordering is not critical, you can remove it.

3. There is a problem with using droppable.drop and droppable.out - they do not capture events for droppables that are dropped onto the start or the end of a list (I suspect this is because the droppable has to be dropped *into* the list to trigger the events, and if you drop it at the start/end of the list, it's effectively a new position and is not within the list).
   So, we can use sortable instead:

    $(".column").sortable({ connectWith: $(".column"), placeholder: "widget-placeholder", forcePlaceholderSize: true, cursor: "move", helper: "clone", dropOnEmpty: true, zIndex: 10 }); $("#column2").on("sortreceive", function (event, ui) { ui.item.find("h3").attr("rel", "0"); }); $("#column2").on("sortremove", function (event, ui) { ui.item.find("h3").attr("rel", "1"); }); 

See my jsFiddle for a working solution.