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

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

javascript jquery

Javascript 如何在不手动按ctrl键的情况下多选择[至少两个相邻]项，并将它们与项目列表的其余部分一起排序？,javascript,jquery,angular-ui-sortable,Javascript,Jquery,Angular Ui Sortable,我正在开发可排序的ui可排序插件我的目标：-多选择项并同时对其排序这个插件的muliselect库可以做到这一点，但为此，我们必须先手动按住ctrl键，然后在选择多个项目的同时释放ctrl键，现在您可以对多个项目进行排序。但我不希望用户手动按住ctrl键目前我想我会触发ctrl键一段时间，然后触发点击下一项，然后对列表进行排序。我在这个想法上浪费了很多时间，但似乎不起作用。我做错了吗 Json数据：- 变量数组=[ { “项目”：1， “超集”：“真” }, { "项目":2,，

我正在开发可排序的ui可排序插件

我的目标：-多选择项并同时对其排序

这个插件的muliselect库可以做到这一点，但为此，我们必须先手动按住ctrl键，然后在选择多个项目的同时释放ctrl键，现在您可以对多个项目进行排序。

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

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

Json数据：- 变量数组=[

{ “项目”：1， “超集”：“真” }, { "项目":2,， “超集”：“假” }, { "项目":3,， “超集”：“真” }, { "项目":4,， “超集”：“假” }, { "项目":5,， “超集”：“真” }, { "项目":6,， 'superset'：'false'}， { "项目":7,， “超集”：“真” }, { "项目":8,， “超集”：“假” }, { “项目”：9， “超集”：“真”

},， {

"项目":10， “超集”：“假”}

])

如果我发现任何项目的superset key==true，那么我希望它的下一个相邻项目与superset==true一起移动。

我试图用您正在使用的插件实现您的需求。但我无法让它工作。但是我成功地使用了这个插件：。
它有一个相对容易实现的多重选择功能。我从他们的页面中的multiselection demo（）复制了代码，并根据您的要求对其进行了修改。
这是正在工作的插销：。
代码：
HTML

CSS

希望这能有所帮助。

你是说技术上不起作用还是实际上不起作用？显示一些代码。按住Ctrl键是提供与其他应用程序一致性的良好做法。@JoelHarkes我添加了一些json数据。希望您不会理解。我不能让用户先按住Ctrl键，因为它的绑定应该是基于json键的自动绑定，正如我上面所讨论的。如果我在任何项目超集key==true中找到它，它应该与它的下一个项目一起移动。你确定你的json数据将始终包含超集key==true和false的项目吗？如果有两个超集为true的连续项怎么办？好的，在json中我不会有任何超集标志。一旦数据在html视图中使用ng REPECT呈现。在单击任何项目之后，我有一些功能，可以将超集标志添加到该项目，并更新数据库中的josn。因此，如果我移动任何项目，如果该项目的超集标志==true，那么它的下一个项目也应该随之移动@欢迎光临。如果它对你有帮助，请接受它作为答案。我想我现在没有这个特权。如果我从上到下拖动，你的解决方案工作得很好，但当我从下到上移动项目时，如果我想在第四个元素之后放置项目，请说它在预期项目的第四个项目之前放置

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

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;
    });
  };

});

/**
 * 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;
}