javascript - 在 jQuery UI 中启用 Shift-Multiselect 可选择 div 元素

Question

我在这里找到了选择带有 ui 可选元素的多个答案，但它们都没有帮助我选择多个 div 而不是 li，所以任何人都可以帮助我。我想要的只是使用 Shift 键事件选择行中的多个 div。 提前感谢您的评论和答复

Answer 1

它与 Ctrl 或 META 键配合使用。

On Macintosh keyboards, the META key maps to the Command key (⌘).

On Windows keyboards, the META key maps to the Windows key.

jQuery UI Selectable 几乎适用于任何适当的结构。如果你想使用<div>你可以，你只需要一个 wrapper 和 child 。

$(function() {
  $("#selectable").selectable();
});

#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 div {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="selectable">
  <div class="ui-widget-content">Item 1</div>
  <div class="ui-widget-content">Item 2</div>
  <div class="ui-widget-content">Item 3</div>
  <div class="ui-widget-content">Item 4</div>
  <div class="ui-widget-content">Item 5</div>
  <div class="ui-widget-content">Item 6</div>
  <div class="ui-widget-content">Item 7</div>
</div>

如果您想允许特定项目，请使用 filter选项。

filter

Type: Selector

Default: "*"

The matching child elements will be made selectees (able to be selected).

如果您检查代码，您将在 _mouseStart 中看到这一点。 ，它是专门为查找 Ctrl 或 Meta 键而编写的:

if ( !event.metaKey && !event.ctrlKey ) {

如果您确实想要使用 Shift 键，则可以使用 Widget Factory ( $.widget() ) 克隆可选择项并重写 _mouseStart函数还可以对 !event.shiftKey 进行异常(exception)处理也是如此。

$(function() {
  $.widget("custom.shiftSelect", $.ui.selectable, {
    _mouseStart: function(event) {
      var that = this,
        options = this.options;

      this.opos = [event.pageX, event.pageY];
      this.elementPos = $(this.element[0]).offset();

      if (this.options.disabled) {
        return;
      }

      this.selectees = $(options.filter, this.element[0]);

      this._trigger("start", event);

      $(options.appendTo).append(this.helper);

      // position helper (lasso)
      this.helper.css({
        "left": event.pageX,
        "top": event.pageY,
        "width": 0,
        "height": 0
      });

      if (options.autoRefresh) {
        this.refresh();
      }

      this.selectees.filter(".ui-selected").each(function() {
        var selectee = $.data(this, "selectable-item");
        selectee.startselected = true;
        if (!event.metaKey && !event.ctrlKey && !event.shiftKey) {
          that._removeClass(selectee.$element, "ui-selected");
          selectee.selected = false;
          that._addClass(selectee.$element, "ui-unselecting");
          selectee.unselecting = true;

          // selectable UNSELECTING callback
          that._trigger("unselecting", event, {
            unselecting: selectee.element
          });
        }
      });

      $(event.target).parents().addBack().each(function() {
        var doSelect,
          selectee = $.data(this, "selectable-item");
        if (selectee) {
          doSelect = (!event.metaKey && !event.ctrlKey) ||
            !selectee.$element.hasClass("ui-selected");
          that._removeClass(selectee.$element, doSelect ? "ui-unselecting" : "ui-selected")
            ._addClass(selectee.$element, doSelect ? "ui-selecting" : "ui-unselecting");
          selectee.unselecting = !doSelect;
          selectee.selecting = doSelect;
          selectee.selected = doSelect;

          // selectable (UN)SELECTING callback
          if (doSelect) {
            that._trigger("selecting", event, {
              selecting: selectee.element
            });
          } else {
            that._trigger("unselecting", event, {
              unselecting: selectee.element
            });
          }
          return false;
        }
      });

    }
  });
  
  $("#selectable").shiftSelect();
});

#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 div {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="selectable">
  <div class="ui-widget-content">Item 1</div>
  <div class="ui-widget-content">Item 2</div>
  <div class="ui-widget-content">Item 3</div>
  <div class="ui-widget-content">Item 4</div>
  <div class="ui-widget-content">Item 5</div>
  <div class="ui-widget-content">Item 6</div>
  <div class="ui-widget-content">Item 7</div>
</div>

希望有帮助。