Multi element drag and drop

Question

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 :

• When we copy any item from source we won't be able to drag it if it is already dropped/in target container .

• To be precise can we make items non drag-gable if they are already in target container.

Answer 1

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

}])

Answer 2

Here is answer for your question. jQuery Sortable - Select and Drag Multiple List Items

I think good idea is use jQuery for drag and drop. I was using this and was worked. And here u have example

jsfiddle.net/hQnWG/614/