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

这应该设置所用元素的句柄 class，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>

Answer 2

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>

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

Jquery sortable - which handle was used to do the sorting

jquery

jquery-ui

jquery-ui-sortable