拖放不正确的行为

Posted

技术标签:

【中文标题】拖放不正确的行为【英文标题】:Drag and Drop incorrect behaviour 【发布时间】:2019-10-13 05:52:04 【问题描述】:

我正在使用 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 + '"  /><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

【问题讨论】:

请分享工作代码sn-p 【参考方案1】:

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

【讨论】:

你在我处理那个寄存器时检查了链接,它已经修复了,但这不是问题......

以上是关于拖放不正确的行为的主要内容,如果未能解决你的问题,请参考以下文章

Firefox html5拖放不起作用

Selenium Webdriver - 拖放不起作用

MailChimp 内容块拖放不起作用

拖放不起作用:未定义的“dropEffect”

jQuery拖放不起作用

Laravel 5.4 - 拖放不起作用