javascript - 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并在我的答案中添加了片段。在这里，我向 select 事件上的元素添加了一个标志类，以识别稍后选择了哪些项目，然后删除 ui-selected并标记它们的类，然后使其取消选择。我想这就是您正在寻找的。