JQuery UI Sortable:如何使一个小区域可拖动,而不是整个可排序元素?

时间:2013-09-15 22:13:45

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

我使用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>元素?

谢谢和问候。

1 个答案:

答案 0 :(得分:5)

当然,请使用handle option

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

jsFiddle example