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"); 
    }); 
});