如何在不手動按下 ctrl 鍵的情況下多選 [至少兩個相鄰] 項目並將它們與項目列表的其余部分一起排序？

Question

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

我的目標：-多選項目並同時對它們進行排序。

好吧，這可以用這個插件的 muliselect 庫來完成，但為此我們必須手動先按住 ctrl 鍵，然后在選擇多個項目的同時松開 ctrl 鍵，現在您可以對多個項目進行排序。 https://github.com/thgreasi/ui-sortable-multiselection

但我不希望用戶手動按住 ctrl 鍵。

目前我在想我會觸發 ctrl 按鍵一段時間並觸發點擊下一個項目然后對列表進行排序。 我在這個想法上浪費了很多時間，但似乎沒有用。我做錯了嗎？

JSON 數據：-

變量數組 = [

{ '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'

}, {

'項目'：10，'超集'：'假'}

];

在 angular ng-repeat 中，如果我發現任何項目的超集鍵 ==true，那么我希望它的下一個相鄰項目與它一起移動，其中具有超集 ==true。

Answer 1

我嘗試使用您正在使用的插件來實現您的要求。 但我無法讓它工作。 但我設法讓它與這個插件一起工作： angular-drag-and-drop-lists 。
它具有相對容易實現的多選功能。 我從他們頁面中的多選演示（這里）中復制了代碼，並根據您的要求對其進行了修改。
這是工作 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 鍵的情況下多選 [至少兩個相鄰] 項目並將它們與項目列表的其余部分一起排序？

問題描述

JSON 數據：-

1 個解決方案

解決方案1
0 已采納 2018-02-12 13:25:19

如何在不手動按下 ctrl 鍵的情況下多選 [至少兩個相鄰] 項目並將它們與項目列表的其余部分一起排序？

問題描述

JSON 數據：-

1 個解決方案

解決方案1 0 已采納 2018-02-12 13:25:19

解決方案1
0 已采納 2018-02-12 13:25:19