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和flag类，然后将其取消选中。我认为这就是你要找的东西。

Answer 2

您可以通过

简单地选择列表

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

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

鼠标拖动
在选择时按 Ctrl 。

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

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

请参阅jQuery-ui的演示http://jqueryui.com/selectable/#default

Answer 3

我认为Aminur根据给出的信息回答了您的问题。这可能是我之前想到的，之后根据他的回答阅读你的反馈意见。

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

sum(x[k]['count'] for k in x)

Fiddle

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

3 个答案: