JQuery UI Sortable：如何使小区域可拖动，而不是整个可排序元素？答案

【问题标题】：JQuery UI Sortable: how to make a small area draggable, not the entire sortable element?JQuery UI Sortable：如何使小区域可拖动，而不是整个可排序元素？
【发布时间】：2013-09-15 22:13:44
【问题描述】：

我使用 JQuery UI Sortable 如下。 HTML：

<ul id="sortable">
  <li><div class="drag-handle">drag me</div>Item 1</li>
  <li><div class="drag-handle">drag me</div>Item 2</li>
  <li><div class="drag-handle">drag me</div>Item 3</li>
  <li><div class="drag-handle">drag me</div>Item 4</li>
</ul>

Javascript：

  $(function() {
    $( "#sortable" ).sortable();
  });

CSS：

ul {
    list-style: none;
}
ul li {
    height: 90px;
    width: 300px;
    background-color: #eee;
    border: 1px solid #aaa;
}
.drag-handle {
    background-color: yellow;
    width:80px;
    height:40px;
}

此时，整个<li> 元素是可拖动的。我怎样才能使只有 div.drag-handle 区域具有相同的结果可拖动（即移动 <li> 元素？

感谢和问候。

【问题讨论】：

标签： jquery-ui drag-and-drop jquery-ui-sortable

【解决方案1】：

当然，使用handle option。

$("#sortable").sortable({
    handle: ".drag-handle"
});

jsFiddle example

【讨论】：