点击并按住可排序功能

时间:2016-07-25 13:56:41

标签: javascript jquery jquery-ui-sortable

这是我的第一个问题,所以我想打招呼:)我真的很喜欢stackoverflow,你是我的编码专家:)

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

我有可排序的div并且它工作正常($("#sortable")。sortable();)

现在我想让它可以排序,但只有当我点击并按住一个名为&#34的按钮时才会移动"。任何其他点击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(从无到可排序)更改鼠标悬停或点击按钮但它没有工作。

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

1 个答案:

答案 0 :(得分:1)

当然,你可以限制排序开始&#39;使用handle选项单击特定元素:

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

&#13;
&#13;
$("#sortable").sortable({
  handle: 'button',
  cancel: ''
});
&#13;
<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>
&#13;
&#13;
&#13;

我希望这会对你有所帮助。