单击并按住可排序功能

Question

这是我的第一个问题，所以我想问好 :) 我真的很喜欢 Whosebug，你是我的编码专家 :)

但现在我遇到了一个问题，我在整个互联网上都没有找到任何答案:P

我有可排序的 div，它工作正常（$（“#sortable”）.sortable();）

现在我想让它可以排序，但只有当我单击并按住名称为 "move" 的按钮时才可以。 div 上的任何其他点击都不应使 div 可排序。

Div 每个可排序按钮都在里面 div。

示例代码：

<div id="sortable">
    <div id="first">
          <img src="...">
          <button>Move</button>
    </div>
    <div id="second">
          <img src="...">
          <button>Move</button>
    </div>
    <div id="third">
          <img src="...">
          <button>Move</button>
    </div>
</div>

你知道如何管理这个吗？我尝试过在鼠标悬停或单击按钮时更改 ID（从 none 到可排序），但它没有用。

非常感谢你:) 最好的祝福克日谢克

Answer 1

当然，您可以使用 handle 选项将 'sort start' 点击限制到特定元素：

$( "#sortable" ).sortable({
  handle: "button",
  cancel: ""
});

$("#sortable").sortable({
  handle: 'button',
  cancel: ''
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="sortable">
  <div id="first">
    <img src="...">
    <button>Move</button>
  </div>
  <div id="second">
    <img src="...">
    <button>Move</button>
  </div>
  <div id="third">
    <img src="...">
    <button>Move</button>
  </div>
</div>

希望对您有所帮助。

单击并按住可排序功能

Sortable function on click and hold

javascript

jquery

jquery-ui-sortable