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.

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

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/

edited May 23 '17 at 11:52

Community

1
1

answered Nov 14 '16 at 18:46

kol1991

65
3
13

Thanks for your suggestion @kol1991. Actually my main concern is that i should also run on touch screens. And for the lists there is more simpler way ANGULAR--DRAG-AND-DROP-LIST_MASTER. I have div's to drag which also have some data in it. – pBanyal Nov 14 '16 at 19:02

Luckylooke · Accepted Answer · 2016-11-27T22:42:15.980

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

}])

Thanks @Luckylooke for your reply. I was eagerly waiting for you to reply on this. By multiple drag/drop i meant that i'll be able to select multiple elements and then drag all of them to the target container. — pBanyal, Nov 15 '16 at 17:24
@pBanyal so that can be done by dragula or dragular, create fiddle/codepen/... with your sceanrio and I can help you solve this ;) — Luckylooke, Nov 16 '16 at 16:44
Apologies @Luckylooke for replying too late. There were some v.urgent deadlines for me. Here is my pen http://codepen.io/pBanyal/pen/ObjQPg and please let me know if anything else is required. — pBanyal, Nov 27 '16 at 14:22
Update to above : I want to make use of model in that. SO that i can reject any element if it is already there and i can have whole object which i am copying. — pBanyal, Nov 27 '16 at 14:24
@pBanyal I have updated my answer yesterday, please let me know if it is what you wanted. — Luckylooke, Nov 28 '16 at 07:38
Thanks @Luckylooke for you help. Yes this is what i want. I'll reach you in case if i need any other help with that. — pBanyal, Nov 28 '16 at 09:19

Multi element drag and drop

2 Answers2