Получите массив идентификаторов после сортировки JQuery UI

Я использую jQuery UI draggable и sortable functions, и я новичок в этом. У меня есть список элементов слева (сгенерированный из базы данных), и у меня есть поля справа, где пользователь может перетаскивать их. В то время как/после удаления пользователь может их сортировать.

Вот полный предварительный просмотр: http://jsbin.com/oBeXiko/3

Проблема: как я могу получить массив идентификаторов элементов в каждом поле после сортировки?

Я попытался использовать .sortable( "toArray" ) и sortable ( "serialize" ), но оба возвращают пустую строку.

Простой HTML

<div id="raspored">  
      <div class="left">
        <ul id="kanta">Delete</ul>    
        <ul id="lista_predmeta" class="droptrue">
          <li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
          <li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
          <li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
          <li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
        </ul>
      </div>
      <div class="right">     
        <ul class="raspored" razred="1">I</ul>  
        <ul class="raspored" razred="2">II</ul>  
        <ul class="raspored" razred="3">III</ul>  
        <ul class="raspored" razred="4">IV</ul>  
      </div>  
  </div> 

Мои функции jQuery

$(document).ready(function() {
     var url = "";
     var raz = 0;

    $( ".raspored" ).sortable({
        cursor: 'move',
        opacity: 0.65,
        stop: function ( event, ui){
            var data = $(this).sortable('toArray');
            console.log(data); // This should print array of IDs, but returns empty string/array
       }
    });

    $(".raspored").droppable({
         accept: ".predmet",   
         drop: function(event, ui){
            ui.draggable.removeClass("predmet");
            ui.draggable.addClass("cas");
            raz = $(this).attr("razred");
         }
    });


    $(".predmet").draggable({
        connectToSortable:".raspored",
        helper: "clone",
        revert: "invalid",

        stop: function(event, ui){
                var predmet = $(this).attr("predmet-id") ;
                console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
        }
    });

    $("#kanta").droppable({
        accept: ".cas",
        drop: function(event, ui){
            ui.draggable.remove();
        }
    });

    $( ".raspored, .predmet, .cas, #kanta, #lista_predmeta" ).disableSelection();
  });