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

【问题标题】：jQuery UI .sortable .on click move items and also keep sorting functionalityjQuery UI .sortable .on 点击移动项目并保持排序功能
【发布时间】：2016-02-29 19:07:22
【问题描述】：

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

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

我该怎么办？

小提琴： http://jsfiddle.net/72RTz/365/

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 下按预期工作。我该如何解决？

【问题讨论】：

我看不出问题出在哪里？我可以点击移动项目，排序功能仍然有效。
尝试释放点击...它会返回列表...如果您对其进行排序，这不是预期的行为。预期的行为应该是：单击以向后移动，如果我按住单击则作为默认排序，因此拖放和排序..明白我的意思吗？
如果我放开一个项目并且它仍在其原始组中，我希望它会返回，它确实如此。如果我放开相邻组中的一个项目，它会正确添加到另一个组，这也是预期的行为。
哦，这太奇怪了。这是正确的行为，但仅限于 CHROME。试试火狐。这是不正确的。这怎么可能？他们如何以两种方式解释代码？我如何解决它？ :-/
是的。它在 Firefox 中肯定被破坏了。不经过调查就不确定问题出在哪里。

标签： javascript jquery jquery-ui firefox jquery-ui-sortable

【解决方案1】：

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

Updated Fiddle

【讨论】：

这在 Chrome 中不起作用：-/ 它保持拖动并卡住。