Перетаскивание некорректное поведение

Question

Я создаю приложение, используя phonegap и jquery mobile, и у меня есть одна страница с системой перетаскивания.

Draggables создаются динамически. Все работает нормально, я могу перетащить элементы из панели jquery в контейнер DIV.

Проблема: по какой-то причине я не могу объяснить, в некоторых случаях, когда я опускаю новый перетаскиваемый объект в контейнер, перетаскиваемый предмет случайным образом меняет положение некоторых других перетаскиваемых объектов, уже упавших внутри контейнера.

Вот мой код:

jQuery.ajax({
           url: '<my_url_request>',
           type: 'GET',
           dataType: 'jsonp',
           success: function(data) {
               console.log(data);

               var players = [];

               $.each(data.posts, function(i, item) {
                     players.push('<div id="player_' + item.id + '" class="ui-draggable player" data-id="' + item.id + '"><img src="' + item.thumbnail_images.medium_large.url + '" width="100%" /><div id="player_name">' + item.title + '</div></div>');
               });  // close each()

               $('#jogadores').append( players.join('') );
               $('#jogadores').trigger('create');

               $( ".ui-draggable" ).draggable({
                            containment: "#soccer_container", 
                            cursor: "move",
                            zIndex: 100
               });  

               $("#soccer_container").droppable({
                    accept: ".ui-draggable",
                    drop: function(event, ui) {        
                        $(this).append($(ui.draggable));
                    }
               });        
           },

           error: function(data){
             console.log(data);
           }
});     

РЕДАКТИРОВАТЬ 1:

Вы можете проверить поведение здесь: здесь

Answer 1

Ваше сообщение с нулевым индексом не имеет записи thumbnail_images