jQueryUI的效果不排序的互动

Question

这里正常工作是我的HTML文件

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <link rel="stylesheet" href="effects.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <script src="effects.js"></script> 

<main> 
    <h2>Rank our Customer Support products</h2> 
    <h3>Drag up or down to rank</h3> 

    <ul id="vsupport"> 
     <li class="ui-state-default">Blog/How-To Articles</li> 
     <li class="ui-state-default">Discussion Forum</li> 
     <li class="ui-state-default">Knowledge Base</li> 
     <li class="ui-state-default">Phone Support</li> 
     <li class="ui-state-default">Wiki Support</li>   
    </ul> 

    <br> 
    <input type="submit" id="submitbutton" value="Submit "> 
</main> 

和effects.js文件

$(document).ready(function(){ 
$("#vsupport").sortable({ 
    placeholder:"ui-state-highlight", 
    start:function(event,ui){ 
     $(ui.item).effect("pulsate",{times:3},1500); 
    }, 
    update:function(event,ui){ 
     $(ui.item).effect("highlight",{color:"#7fffd4"},2000); 
    } 
}); 
$("#submitbutton").button().on("click",function(){ 
    $("#vsupport li").removeAttr("style"); 
}); 

}）;

我的问题是，当我拖动li元素对它进行排序，li元素消失了，并通过调试工具，ISAW一些css样式添加到li元素：

<li class="ui-state-default ui-sortable-handle" style="width: 313px; height: 18px; position: absolute; z-index: 1000;">Knowledge Base</li> 

，如果我删除这个CSS样式，li元素再次出现。 任何人都知道为什么会发生这种情况以及解决办法？

任何答案表示赞赏，谢谢！

Answer 1

这是因为'脉动'如何运作。它将在脉动时将拖动项目的位置设置为“绝对”。因此，物品掉落后，下一个物品将消失在拖动的物品下方。如果您完成持有该项目直到脉动完成，那么一切将按预期运行。

因此，我们进行了修复搏动停止后的位置：

$(document).ready(function(){ 
    $("#vsupport").sortable({ 
     placeholder:"ui-state-highlight", 
     start:function(event,ui){ 
      $(ui.item).effect("pulsate",{times:3},1500,function() { 
       $(this).css('position','initial'); //fixing the position 
      }) 
     }, 
     update:function(event,ui){ 
      $(ui.item).effect("highlight",{color:"#7fffd4"},2000); 
     }, 
     stop:function(event,ui){ 

     } 
    }); 
    $("#submitbutton").button().on("click",function(){ 
     $("#vsupport li").removeAttr("style"); 
    }); 
});