Javascript jQuery UI可排序行为不直观-难以上下移动_Javascript_Jquery_Html_Jquery Ui_Jquery Ui Sortable

Javascript jQuery UI可排序行为不直观-难以上下移动

javascript jquery html jquery-ui

Javascript jQuery UI可排序行为不直观-难以上下移动,javascript,jquery,html,jquery-ui,jquery-ui-sortable,Javascript,Jquery,Html,Jquery Ui,Jquery Ui Sortable,如中所示，您必须将项目向右拖动才能上下移动。 <body class="container"> <div class="form-group"> <label class="control-label col-md-2">Testeroo</label> <div class="col-md-10"> <ul class="sortable fa-ul"> <li>

如中所示，您必须将项目向右拖动才能上下移动。

<body class="container">
  <div class="form-group">
    <label class="control-label col-md-2">Testeroo</label>
    <div class="col-md-10">
      <ul class="sortable fa-ul">
        <li>
          <i class="fa-li fas fa-arrows-alt-v fa-lg"></i>
          <input value="One" />
          <input value="Two" />
        </li>
        <li>
          <i class="fa-li fas fa-arrows-alt-v fa-lg"></i>
          <input value="One" />
          <input value="Two" />
        </li>
      </ul>
    </div>
  </div>
</body>

我希望用户能够直接上下移动项目，甚至向左下移动项目。显然，只需向右拖动即可垂直重新排序并不直观

箭头图标是

手柄

，您必须单击并拖动该部件才能移动项目

HTML:

<body class="container">
  <div class="form-group">
    <label class="control-label col-md-2">Testeroo</label>
    <div class="col-md-10">
      <ul class="sortable fa-ul">
        <li>
          <i class="fa-li fas fa-arrows-alt-v fa-lg"></i>
          <input value="One" />
          <input value="Two" />
        </li>
        <li>
          <i class="fa-li fas fa-arrows-alt-v fa-lg"></i>
          <input value="One" />
          <input value="Two" />
        </li>
      </ul>
    </div>
  </div>
</body>

使用来自的图标，这就是

fa*

类的含义。我也在使用Bootstrap，如果它有任何区别的话，它也在小提琴中。

这是由于你的手柄

I.fa-li

不在

ul

的边界内。如果在

ul

元素上放置

背景色

，您将看到控制柄在外部，因此鼠标在向右拖动之前不会进入可排序区域

您需要调整CSS，使手柄位于要启动的

ul

区域内，而不会执行此操作

为了演示，我将

fali

元素移回右侧，并用

填充其余的

li

元素来说明它。这是一个黑客行为，但它表明它是可以修复的：

使用CSS和

.pad

元素有一个更好的解决方案：

您可以使用

可排序的

选项启用可排序，然后您就可以直接上下移动项目，甚至可以向左下移动项目

我已经修改了你的演示并创建了一个

以下是如何添加

轴

选项：

$(".sortable").sortable({ 
    handle: "i.fa-li",
    axis: "y"
});

顺便说一句，我确信这是有意为之的行为，我只是不知道如何覆盖它。你能详细说明一下CSS中发生了什么吗？我稍微调整了

em

值，看看是否可以让它更宽容（允许用户向下和向左移动），我认为我是成功的，但它有一个坏的副作用：您溢出了

li

元素的宽度。让它更宽，或者是一个固定的宽度，或者是一个大于100%的百分比：这绝对是我想要的。移动项目过快导致订单无法更改是否是已知问题？或者这是我这边的问题吗？我不确定这是否是一个已知的问题，但我看不到您的代码中有任何导致此类行为的主要问题。我认为您应该更深入地了解jQueryUISortable的API文档以及定制句柄布局的方法，我相信您会从中得到答案：）我怀疑这是句柄的结果，但这是可能的。不管怎么说，这是一个新问题，我只是想知道你是否知道你头脑中的任何东西。这是我一直在寻找的答案，我已经将其标记为已接受。