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事件是可以的，如果事件发生在“可排序”区域之外，它不会导致项目移动。

Updated Fiddle

jQuery UI .sortable .on点击移动项目并保持排序功能

1 个答案: