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

target的{{1}}会告诉您点击了哪个元素。像这样：

originalEvent

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

Answer 2

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

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

＆＃13;

$( "#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);
          
      }
});

＆＃13;

<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>

＆＃13;

Jquery可排序 - 哪个句柄用于进行排序

2 个答案: