拖放错误的行为

Question

我正在使用phonegap和jquery mobile开发一个应用程序，并且有一个页面具有拖放系统。

可拖动对象是动态创建的。一切正常，我可以将项目从jquery面板拖到Containner DIV。

问题：出于某些原因，我有时无法解释将新的可拖动对象放到容器中的情况，而droppable会随机更改已经放置在容器中的其他一些可拖动对象的位置

这是我的代码：

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：

您可以在此处检查行为：here

Answer 1

您的索引为零的帖子没有thumbnail_images条目