未触发可排序句柄答案

【问题标题】：Sortable handle is not being triggered未触发可排序句柄
【发布时间】：2018-02-02 11:37:32
【问题描述】：

我正在通过 jQuery UI 使用可排序的小部件。我能够在不使用 handle 选项的情况下让它工作。当使用handle 选项通过<button> 移动li 时，我无法让它工作。出了什么问题？

$( ".one" ).sortable({
  handle: ".move"
});

$( ".two" ).sortable({});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<h1>one</h1>
<ul class="one">
  <li>One <button class="move">Move</button></li>
  <li>Two <button class="move">Move</button></li>
  <li>Three <button class="move">Move</button></li>
  <li>Four<button class="move">Move</button></li>
</ul>

<h1>two</h1>
<ul class="two">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

查看http://jsfiddle.net/80qex6v1/28/上的示例

【问题讨论】：

I could not get it work 是什么意思？

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

您的按钮没有.handle 类，您需要改用.move。另请注意，为此使用按钮并不是一个好主意，因为它们已经有自己的点击逻辑。我建议改用div 或任何其他非表单输入元素。

$( ".one" ).sortable({ handle: ".move" });
$( ".two" ).sortable({});

.move {
  display: inline-block;
  background: #c00;
  color: #fff;
  padding: 2px;
  margin: 1px;
}

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

<h1>one</h1>
<ul class="one">
  <li>One
    <div class="move">Move</div>
  </li>
  <li>Two
    <div class="move">Move</div>
  </li>
  <li>Three
    <div class="move">Move</div>
  </li>
  <li>Four
    <div class="move">Move</div>
  </li>
</ul>

<h1>two</h1>
<ul class="two">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

【讨论】：

【解决方案2】：

简单。不要将<button> 用于不应是按钮的内容。这不是很好的语义，并且按钮将被 jQueryUI 作为句柄元素忽略 - 因为它是表单操作元素，而不是移动句柄。

【讨论】：