jQuery UI .sortable .on click 移动项目并保留排序功能

Question

我有一个工作代码，点击它可以在 2 个列表中来回移动项目。但是，这会破坏排序功能。

我希望能够使用点击，但也希望能够在必要时通过拖动对项目进行排序，并避免在这种情况下触发 .on 点击。

我该怎么办？

HTML:

 <h5 class="prefix-popover-heading">Group 1</h5>
           <!-- IF .prefix_option or .prefix_used -->
            <ul id="available_prefixes" class="prefixed_sortable list-inline">
        <!-- <li id="disable-selection">{L_PREFIX_BASKET}</li> -->
             <li class="click_area">item1</li>
      <li class="click_area">item2</li>
    <li class="click_area">item3</li>
            </ul>

  <h5 class="prefix-popover-heading">Group 2</h5>
<div class="group2">
<div id="PrefixBtn" class="input-group-addon fade">
    <ul id="used_prefixes" class="prefixed_sortable">
      <!-- <li class="placeholder">Drop here</li> -->
         <li class="click_area">item4</li>
      <li class="click_area">item5</li>
    <li class="click_area">item6</li>

    </ul>
</div>
</div>

JS:

// Make divs sortable
    $("#available_prefixes, #used_prefixes").sortable({
        connectWith: '.prefixed_sortable',
        items: 'li',
        forcePlaceholderSize: true,
        placeholder: 'ui-sortable-placeholder',
        tolerance: 'pointer',
}).disableSelection()
//  lets make it easier and append item on click as well
  .on('click', '.click_area', function(){
            $(this).appendTo($("#available_prefixes, #used_prefixes").not($(this).closest("ul")));
    });

更新：显然这只是在 FIREFOX 下的问题。在 CHROME 下按预期工作。我该如何解决？

Answer 1

此问题出现在 FireFox 中是因为 click 事件的处理方式不同。我不知道为什么会这样，但是如果您将 click 事件更改为 mouseup 事件，您想要的功能将起作用。在您的上下文中使用 mouseup 事件是可以的，如果事件发生在 "sortable" 区域之外，它不会导致项目移动。

Updated Fiddle

jQuery UI .sortable .on click 移动项目并保留排序功能

jQuery UI .sortable .on click move items and also keep sorting functionality

javascript

firefox

jquery

jquery-ui

jquery-ui-sortable