angularjshtmldrag-and-dropangular-draguladragular

Multi element drag and drop


I am working on the drag and drop feature for my client. I've already implemented dragular for drag and drop but there is no provision of multi element drag and drop in dragular or any other library which is being provided for drag and drop.

Kindly suggest me how can i select and drag/drop multi element in angular or any other javascript library which should also be compatible with touch devices.

Thanks in advance.

Note : Can we use multiple drag and drop in dragular.?

Update (30/11/2016) : To add up a bit to my requirement . How we can restrict redundancy of elements in drop zone.

Explanation :


Solution

  • You mean that multiple separate drag&drops? Like draging one element with one finger and second element with another finger?

    Thats not supported by dragula nor dragular, but I am working on new library where it will be possible, but it is still in progress now :/

    I dont know any other library supporting it.

    EDIT (27.11.16):

    I have updated your pen 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);
      });
    
    }])