Question

我正在为我的客户端进行拖放功能。我已经实现了用于拖放的dragular，但是没有提供多个元素的拖放或拖动或任何其他为拖放提供的库。

请建议我如何在角度或任何其他javascript库中选择和拖放多元素，这也应与触摸设备兼容。

提前致谢。

注意：我们可以在dragular中使用多次拖放。

更新（2016年11月30日）：根据我的要求添加一些内容。我们如何限制drop zone中元素的冗余。

说明：

当我们从源代码中复制任何项目时，如果它已经被删除/在目标容器中，我们将无法拖动它。
准确地说，如果物品已经在目标容器中，我们可以制作非拖曳物品。

Answer 1

以下是您的问题的答案。 jQuery Sortable - Select and Drag Multiple List Items

我认为好主意是使用jQuery进行拖放。我正在使用它并且工作了。在这里你有例子

jsfiddle.net/hQnWG/614 /

Answer 2

你的意思是多次单独的拖放？就像用一根手指拉出一个元素，用另一根手指拉出第二个元素一样？

这不受dragula或dragular支持，但我正在开发新库，但现在仍在进行中：/

我不知道任何其他支持它的图书馆。

编辑（27.11.16）：

我已更新了您的笔http://codepen.io/luckylooke/pen/zodmEO

angular.module("testDnD", ["dragularModule"]).
controller("test", ['$scope', 'dragularService', function($scope, dragularService) {

  $scope.selected = [];
  $scope.filter = [];
  $scope.testObj = [{...}];

  $scope.modelClickData = function(test) {
    console.log(test);
    $scope.popdata = test;
  };

  $scope.modelSelect = function(test) {
    test.selected = !test.selected;

    if (test.selected)
      $scope.selected.push(test);
    else
      $scope.selected.splice($scope.selected.indexOf(test), 1);

    // console.log('selected', test);
  };

  var containerLeft = document.querySelector('#thumbnailTST');
  var containerRight = document.querySelector('#filler');

  dragularService.cleanEnviroment();
  dragularService([containerLeft, containerRight], {
    copy: true,
    containersModel: [$scope.testObj, $scope.filter],
    scope: $scope
  });

  $scope.$on('dragularcloned', function() {
    var mirror = $('.gu-mirror');
    if ($scope.selected.length > 1 && mirror.length) { // is multiple drag
      mirror.addClass('multipledrag');
    }
  });

  $scope.$on('dragulardrop', function(e, el, targetcontainer, sourcecontainer, conmodel, elindex, targetmodel, dropindex) {
    if ($scope.selected.length > 1) { // is multiple drag
      $scope.selected.forEach(function(item) {
        if (item != $scope.testObj[elindex]) {
          var clone = {};
          clone = $.extend(true, clone, item);
          delete clone.$$hashKey;
          $scope.filter.splice(++dropindex, 0, clone);
        }
      });
    }
    console.log($scope.filter);
  });

}])

多元素拖放

2 个答案: