拖放不正确的行为

Question

我正在使用 phonegap 和 jquery mobile 制作应用程序，并且我有一个带有拖放系统的页面。

可拖动对象是动态创建的。一切正常，我可以将项目从 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：

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

Answer 1

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