如何在不手动按下 ctrl 键的情况下多选 [至少两个相邻的] 项目并将它们与项目列表的其余部分一起排序？

Question

我正在开发可排序的 angular ui-可排序的插件 https://github.com/angular-ui/ui-sortable

我的目标：- 多选项目并同时对它们进行排序。

好吧，可以使用此插件的 muliselect 库来完成，但为此我们必须先手动按住 ctrl 键，然后在选择多个项目时松开 ctrl 键，现在您可以对多个项目进行排序。 https://github.com/thgreasi/ui-sortable-multiselection

但我不希望用户手动按住 ctrl 键。

目前我在想我会触发 ctrl 按键一段时间，然后触发点击下一个项目然后对列表进行排序。我在这个想法上浪费了很多时间，但似乎没有 working.am 我做错了吗？

Json数据：-

var 数组 = [

{ 'item':1, 'superset':'true' }, { 'item':2, 'superset':'false' }, { 'item':3, 'superset':'true' }, { 'item':4, 'superset':'false' }, { 'item':5, 'superset':'true' }, { 'item':6, 'superset':'false'}, { 'item':7, 'superset':'true' }, { 'item':8, 'superset':'false' }, { 'item':9, 'superset':'true'

}, {

'item':10, 'superset':'false'}

];

在 angular 内 ng-repeat 如果我发现任何项目的超集键 ==true 那么我希望它的下一个相邻项目与它一起移动，它具有超集 ==true。

Answer 1

我尝试使用您正在使用的插件来实现您的要求。但我无法让它工作。但我设法让它与这个插件一起工作：angular-drag-and-drop-lists.
它具有相对容易实现的多选功能。我从他们页面的多选演示（here）中复制了代码，并根据您的要求进行了修改。
这是工作的 plunker：https://plnkr.co/edit/fq4ca0LlKbsfLtFifQ2s?p=preview.
代码：
HTML

<body ng-app="MyApp">
  <div ng-controller="MyController">
    <ul dnd-list dnd-drop="onDrop(model, val, index)">
      <li ng-repeat="val in model.items"
      dnd-draggable="getSelectedItemsIncluding(model, val)"
      dnd-dragstart="onDragstart(model, event)"
      dnd-moved="onMoved(model)"
      dnd-dragend="model.dragging = false"
      dnd-selected="val.selected = !val.selected"
      ng-class="{'selected': val.selected}"
      ng-hide="model.dragging && val.selected"
      ng-init="val.selected=false">
        {{ "Item " + val.item }}
      </li>
    </ul>
  </div>
</body>

JS

var myAppModule = angular.module('MyApp', ['dndLists']);

myAppModule.controller('MyController', function($scope) {

  $scope.model = {
    items: [{
      'item': 1,
      'superset': true
    }, {
      'item': 2,
      'superset': false
    }, {
      'item': 3,
      'superset': true
    }, {
      'item': 4,
      'superset': false
    }, {
      'item': 5,
      'superset': true
    }, {
      'item': 6,
      'superset': false
    }, {
      'item': 7,
      'superset': true
    }, {
      'item': 8,
      'superset': false
    }, {
      'item': 9,
      'superset': true
    }, {
      'item': 10,
      'superset': false
    }],
    dragging: false
  };

  /**
   * dnd-dragging determines what data gets serialized and send to the receiver
   * of the drop. While we usually just send a single object, we send the array
   * of all selected items here.
   */
  $scope.getSelectedItemsIncluding = function(list, item) {
    item.selected = true;
    if(item.superset) {
      var index = list.items.indexOf(item);
      list.items[index+1].selected = true;
    }
    return list.items.filter(function(item) {
      return item.selected;
    });
  };

  /**
   * We set the list into dragging state, meaning the items that are being
   * dragged are hidden. We also use the HTML5 API directly to set a custom
   * image, since otherwise only the one item that the user actually dragged
   * would be shown as drag image.
   */
  $scope.onDragstart = function(list, event) {
    list.dragging = true;
    console.log(event);
    if (event.dataTransfer.setDragImage) {

      //event.dataTransfer.setDragImage(img, 0, 0);
    }
  };

  /**
   * In the dnd-drop callback, we now have to handle the data array that we
   * sent above. We handle the insertion into the list ourselves. By returning
   * true, the dnd-list directive won't do the insertion itself.
   */
  $scope.onDrop = function(list, items, index) {
    items = list.items.filter(function(item) {
      return item.selected;
    });
    angular.forEach(items, function(item) {
      item.selected = false;
      list.items.splice(list.items.indexOf(item), 1);
    });
    index = index - items.length;
    list.items = list.items.slice(0, index)
      .concat(items)
      .concat(list.items.slice(index));
      $scope.$apply();
    return true;
  }

  /**
   * Last but not least, we have to remove the previously dragged items in the
   * dnd-moved callback.
   */
  $scope.onMoved = function(list) {
    list.items = list.items.filter(function(item) {
      return !item.selected;
    });
  };

});

CSS

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop into it once it's empty
 */
.multiDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.multiDemo ul[dnd-list] .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

.multiDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
}

/**
 * Show selected elements in green
 */
.multiDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

希望对您有所帮助。

如何在不手动按下 ctrl 键的情况下多选 [至少两个相邻的] 项目并将它们与项目列表的其余部分一起排序？

how to muliselect[at least two adjacent] items without manually pressing ctrl key and sort them with the rest of the items list?

javascript

jquery

angular-ui-sortable

Json数据：-