Включить Shift-Multiselect в jQuery UI Выбирается для элементов div

Question

Я нашел несколько ответов для выбора элементов с возможностью выбора пользовательского интерфейса здесь, но ни один из них не помог мне выбрать несколько div вместо li, так что любой может помочь мне с этим же.все, что я хочу, это выбрать несколько DIV в строке с событием Shift Key.заранее спасибо за комментарии и ответы

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.

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>

Надеюсь, что поможет.