jQueryUI effects not working properly on sortable interactions - jquery-ui

Question

Here is my Html file
<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>
and the effects.js file
$(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");
});
});
My question is, when I drag the li element to sort it, the li element disappears, and through debug tool,Isaw some css style was added to the li element:
<li class="ui-state-default ui-sortable-handle" style="width: 313px; height: 18px; position: absolute; z-index: 1000;">Knowledge Base</li>
and if I remove this css style, the li element appears again.
Anyone knows why this happens and any solutions to it?
Any answer is appreciated, thanks!

Answer 1

It is because of how 'pulsate' operates. It will set the position of the dragged item as 'absolute' while pulsating. Thus, after the item is dropped, the next item will disappear underneath the dragged item. If you finish holding the item until pulsating is finished, then everything will operate as intended.
Therefore, let's fix the position after pulsating stops:
$(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");
});
});