pBanyal pBanyal - 9 months ago 82
AngularJS Question

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 :

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

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) {
    $scope.popdata = test;

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

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

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

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

  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

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