使用 Jquery 拖放时 DOM 重新加载答案

【问题标题】：DOM reloads when using Jquery drag and drop使用 Jquery 拖放时 DOM 重新加载
【发布时间】：2014-10-28 12:58:14
【问题描述】：

我们正在为我们的学校项目制作一个互动故事。但是我们遇到了一个问题，当你到了你必须建立一个乐高人的阶段时。当您将其中一个身体部位拖到灰色区域时，似乎会重置 DOM，或刷新它。

谁能看到发生了什么？

您可以在此链接上看到“游戏”。

http://mikkellindblom.dk/tommy-LEGO/

----- 抱歉没有代码！！！ ----- 我不知道我应该发布哪个部分，甚至不确定是否是重置的 DOM。

【问题讨论】：

对我来说很好。过关了，耶！
当您将头部捕捉到头部灰色空间时它不会“闪烁”？
我也通过了第一关，没有重新加载。我是个很棒的玩家...我使用的是最新版本的 Firefox。

标签： jquery ajax dom draggable droppable

【解决方案1】：

我看到你的 DOM 元素重新绘制，Win7/Chrome。您的代码隐藏在 AJAX 片段中，需要一段时间才能找到，但我认为发生的事情是，当您成功删除项目时 - 它也注册为点击事件，并且在该页面上，您确实有一个点击事件：

// Level 2 handeler
        $("#level-2").click(function(){
           if ( $( this ).hasClass( "active" ) ) {
           $( "#level_holder" ).fadeOut( "slow" );
           $( "#loader" ).fadeIn();
           $( "#content_holder" ).load('content/content-2.html');
           $( "#content_holder" ).fadeIn();
           $( "#loader" ).fadeOut();
           } else {
            swal({ title: "Hov!", text: "Du skal klare level 1 først!", type: "error", confirmButtonText: "Okay" });
           }
        });

因此，您可能想尝试在可拖放的放置事件中防止事件进一步冒泡。在这部分，添加一些代码来防止点击事件继续冒泡：

function handleItemDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var itemNumber = ui.draggable.data( 'number' );
  // Hvis delen er placeret i den korrekte ramme.
  if ( slotNumber == itemNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctItems++;
  } 
  // Antallet af dele der er placeret korrekt = 3 (total = 3), load nÃ¦ste side.
  if ( correctItems == 3 ) {
    $( "#main" ).load('content/fragments-1/fragment-3.html');
  }
 event.stopPropagation(); // <-- stops the 'click' event firing, reloading your "page".
}

这里是 jQuery 事件处理的链接： http://api.jquery.com/event.stoppropagation/

所以 - 简而言之，我认为当您成功放置一个对象时，它也会触发页面的点击事件，最终会重绘该片段。从本质上讲，在 handleItemDrop 函数的末尾添加 event.stopPropagation() 并查看这是否不会停止刷新该 DOM 片段（它不像重做fadeOut 和fadeIn 那样令人耳目一新）。

【讨论】：