Jquery sortable-使用哪个句柄进行排序

Question

这是我的可排序列表，有两个句柄（handleOne和handleTwo）。

在更新时，我想知道哪个句柄被用来进行排序。这可能吗？

$( "#sortable" ).sortable({
      items: "> .sortableItem",
      handle: ".handleOne, .handleTwo",
      update: function( event, ui ) {
          //Here I want to know which handle was used to do the sorting.
          //Handle one or handle two
      }
});
<ul id="sortable">
    <li class="sortableItem"><div class="handleOne">row 1 cell 1</div> <div class="handleTwo">row 1 cell 2</div></li>
    <li class="sortableItem"><div class="handleOne">row 2 cell 1</div> <div class="handleTwo">row 2 cell 2</div></li>
    <li class="sortableItem"><div class="handleOne">row 3 cell 1</div> <div class="handleTwo">row 3 cell 2</div></li>
</ul>

谢谢！

Answer 1

originalEvent的target会告诉您单击了哪个元素。像这样：

$("#sortable").sortable({
  items: "> .sortableItem",
  handle: ".handleOne, .handleTwo",
  update: function(event, ui) {
    console.log(event.originalEvent.target)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<ul id="sortable">
  <li class="sortableItem">
    <div class="handleOne">row 1 cell 1</div>
    <div class="handleTwo">row 1 cell 2</div>
  </li>
  <li class="sortableItem">
    <div class="handleOne">row 2 cell 1</div>
    <div class="handleTwo">row 2 cell 2</div>
  </li>
  <li class="sortableItem">
    <div class="handleOne">row 3 cell 1</div>
    <div class="handleTwo">row 3 cell 2</div>
  </li>
</ul>

Answer 2

这应该设置handle所用元素的类，handleOne或handleTwo。

var handle = event.toElement.className.split(" ")[0];

$( "#sortable" ).sortable({
      items: "> .sortableItem",
      handle: ".handleOne, .handleTwo",
      update: function( event, ui ) {
          //Here I want to know which handle was used to do the sorting.
          //Handle one or handle two
          var handle = event.toElement.className.split(" ")[0];
          $("#result").text(handle);
          
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<ul id="sortable">
    <li class="sortableItem"><div class="handleOne">row 1 cell 1</div> <div class="handleTwo">row 1 cell 2</div></li>
    <li class="sortableItem"><div class="handleOne">row 2 cell 1</div> <div class="handleTwo">row 2 cell 2</div></li>
    <li class="sortableItem"><div class="handleOne">row 3 cell 1</div> <div class="handleTwo">row 3 cell 2</div></li>
</ul>
<span id="result"></span>