多元素拖放答案

【问题标题】：Multi element drag and drop多元素拖放
【发布时间】：2016-11-14 18:32:50
【问题描述】：

我正在为我的客户开发拖放功能。我已经实现了用于拖放的 Dragular，但在 Dragular 或任何其他用于拖放的库中没有提供多元素拖放。

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

提前致谢。

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

更新（2016 年 11 月 30 日）：补充一点我的要求。我们如何限制放置区中元素的冗余。

解释：

当我们从源复制任何项目时，如果它已经被拖放到目标容器中，我们将无法拖动它。
准确地说，如果项目已经在目标容器中，我们可以使它们不可拖动。

【问题讨论】：

标签： angularjs html drag-and-drop angular-dragula dragular

【解决方案1】：

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

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

}])

【讨论】：

感谢@Luckylooke 的回复。我急切地等着你回答这个问题。多次拖放意味着我可以选择多个元素，然后将它们全部拖到目标容器中。
@pBanyal 这样可以通过 Dragula 或 Dragular 完成，使用您的场景创建 fiddle/codepen/...，我可以帮助您解决这个问题 ;)
抱歉@Luckylooke 回复太晚了。对我来说有一些非常紧迫的截止日期。这是我的笔codepen.io/pBanyal/pen/ObjQPg，如果需要其他信息，请告诉我。
更新到上面：我想在其中使用模型。这样我就可以拒绝任何元素，如果它已经存在并且我可以拥有我正在复制的整个对象。
@pBanyal 我昨天更新了我的答案，如果你想要的话，请告诉我。

【解决方案2】：

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

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

jsfiddle.net/hQnWG/614/

【讨论】：

感谢您的建议@kol1991。实际上我主要关心的是我也应该在触摸屏上运行。对于列表，还有更简单的方法 ANGULAR--DRAG-AND-DROP-LIST_MASTER。我有要拖动的 div，其中也有一些数据。