Question

我在这里找到了用于选择具有ui可选元素的多个答案，但是没有一个答案可以帮助我选择多个div而不是li，因此任何人都可以帮助我选择同一个。我想要的是使用shift键事件在行中选择多个div。感谢您提前提出评论和答案

Answer 1

它与 Ctrl 或META键一起使用。

在Macintosh键盘上，META键映射到Command键（⌘）。

在Windows键盘上，META键映射到Windows键。

jQuery UI Selectable几乎可以在任何适当的结构上工作。如果您想使用<div>，则只需要一个包装器和子项即可。

$(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选项。

过滤器

类型：选择器

默认值："*"

匹配的子元素将成为被选择者（可以选择）。

如果您检查代码，则会在_mouseStart中看到它是专门为查找Ctrl或Meta键而编写的：

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

如果您真的要使用Shift键，则可以使用Widget Factory（$.widget()）来克隆可选对象，然后重新编写_mouseStart函数以使!event.shiftKey也是一个例外。

$(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>

希望有帮助。

为div元素启用jQuery UI Selectable中的Shift-Multiselect

1 个答案: