Using Sortable, is there a way to monitor the event when an item is moved from one list to another?

Using Sortable, is there a way to monitor the event when an item is moved from one list to another?

Here is the demo I am looking at:
http://jqueryui.com/sortable/#connect-lists

I want to be alerted whenever an item is exchanged between lists. Is there a function that handles this? I have already tried this: 

  1. $("html").on("dragover", function(event) { event.preventDefault(); event.stopPropagation(); $(this).addClass('dragging'); }); $("html").on("dragleave", function(event) { event.preventDefault(); event.stopPropagation(); $(this).removeClass('dragging'); }); $("html").on("drop", function(event) { event.preventDefault(); event.stopPropagation(); alert("Dropped!"); });

I am not alerted of anything and it does not pick up on any of the events. I am using this to show/hide columns of a grid depending on which list it is dropped into. I need to be able to get the 'id' from the item so that I can show/hide the column of the same 'id'.


Here is my code:

  1. <div class="row" style="margin-top:10px;">
        <div class="col-lg-6">
            <div id="Included" class="col-lg-3">
                <ul id="Showing" class="connectedSortable" style="list-style-type:none"></ul>
            </div>
            <div id="Excluded" class="col-lg-3">
                <ul id="NotShowing" class="connectedSortable" style="list-style-type:none"></ul>
            </div>
        </div>
    </div>

The javascript below dynamically generates the list based on the number of columns in the grid. The gridColumns are added into the array called tempIncluded, which is then pushed into the array included. the array included is multidimensional so I can iterate through and get the correct items.

  1.        for (var i = 0; i < gridColumns.length; i++) {
               tempIncluded.push(gridColumns[i].field, gridColumns[i].title);
               included.push(tempIncluded);
               tempIncluded = [];
               $("#Included ul").append("<li id='" + included[i][0] + "'>" + included[i][1] + " <span name='" + included[i][0] + "' id='" + included[i][0] + "'></span></li>");

               $('#' + included[i][0]).on('click', function (event) {
                   alert(event.target.id);
               });
           }

Thanks.