jQuery UI 可选小部件通过鼠标拖动多次取消选择

Question

我正在使用 jQuery UI 可选小部件。我在Is there a way to change event parameters in jQuery? 看到了一个解决方案，可以启用多项选择（使用鼠标拖动），效果很好。现在我正在尝试获得类似的功能来取消选择多个不起作用的元素。

$('#selectlist').on("mousedown", function (e) {
    e.metaKey = true; //multiple select true
    //e.ctrlKey = true;
}).selectable({
    filter: '.select-li',
    selecting: function (event, ui) {
        debugger;
        //if ($(ui.selecting).hasClass('li-planned')) {
        //    $(ui.selecting).removeClass("ui-selecting");
        //}
    },
    unselecting: function (event, ui) {
        //if ($(ui.unselecting).hasClass('li-planned')) {
        //    $(ui.unselecting).removeClass("ui-unselecting").addClass('ui-selected');
        //}
    },
    stop: function (event) {
        //debugger;
        //do some work here
    }
})

我尝试了多种选择来实现，但到目前为止我无法获得它。任何帮助将不胜感激。

Answer 1

$(function() {
  $("#selectable").bind("mousedown", function(e) {
    e.metaKey = true;
  }).selectable();
  $("#selectable").selectable({
    selected: function(event, ui) {
      if (!$(ui.selected).hasClass('selected-flag')) {
        $(ui.selected).addClass('selected-flag');
      } else {
        $(ui.selected).removeClass("ui-selected selected-flag");
      }
    }
  });
});

#feedback {
  font-size: 1.4em;
}
#selectable .ui-selecting {
  background: #FECA40;
}
#selectable .ui-selected {
  background: #F39814;
  color: white;
}
#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}
#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all">
<script src="https://code.jquery.com/ui/1.8.5/jquery-ui.min.js"></script>

<div class="demo">
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
  </ol>

</div>

我创建了一个解决方案 here 并在我的答案中添加了 sn-p。在这里，我在 select 事件中为元素添加了一个标志类，以便稍后确定哪些项目被选中，然后从它们中删除 ui-selected 和标志类，然后使其未选中。我想这就是你要找的。​​p>

Answer 2

您可以简单地通过以下方式选择您的列表

 $( "#selectlist" ).selectable();

您可以在不按下鼠标的情况下对可选择项进行多项选择。

1. 鼠标拖动
2. 在选择时按Ctrl。

取消选择多个（基于上面的选择），

1.a.选择一个，其他所有将取消选择
1.b。在列表中选择一个空白区域（例如 list1 和 list2 之间的空格），所有将取消选择
2. 取消选择时按Ctrl。

查看 jQuery-ui 的演示 http://jqueryui.com/selectable/#default

Answer 3

我认为 Aminur 根据所提供的信息回答了您的问题。这可能是我在阅读您在他的回答下的反馈之前以为您所追求的。

这是另一个建议。如果用户开始拖动已经选定的项目，此提案基本上会清除所有选定的项目。当您说要取消选择多个元素时，也许这就是您所追求的。

$(function() {
  $("#selectable").bind("mousedown", function(e) {
    if(e.target.className.indexOf('ui-selected') === -1){
        e.metaKey = true;
    }
  }).selectable();
});

Fiddle