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

jQueryUI效果在可排序交互上无法正常工作

1 个答案: