Drag multiple items at once

[omytryniuk]

Thanks for the great project.
Right now I am working on the task where I should drag and drop multiple items.
I have checked the documentation, same as the issues thread; however, I have not found any relative info regarding how to drag multiple items same time.

That's why I am wondering whether the library supports the functionality or someone had success to achieve it by using the library.

Thanks

[chengmanxiang]

Is it possible to drag multiple projects at a time? I also have this need.Thank you

[chengmanxiang]

https://react-beautiful-dnd.netlify.com/?selectedKind=Multi%20drag&selectedStory=pattern&full=0&addons=1&stories=1&panelRight=0 Functions like this

[owen-m1]

@chengmanxiang It is now available on next-version branch. Docs are there too.

[evifere]

hi i try to use this feature with next-version branch with vuedraggable
i have an error in the destroy method of _sortable
TypeError: Cannot read property 'shiftKey' of undefined
at Sortable._onDrop Sortable.js:1546:14)

i have made an example of the error here with on on sortable object standalone

when i click on a destroy button i try to destroy my sortable object .
as you can see you will have an error in _onDrop method

https://jsbin.com/nujadeq/edit?html,js,console,output

should I create another issue or it is the right place to report the problem here ?

[owen-m1]

@evifere Yes, this is a SortableJS issue. It should be solved in commit 21f5ad4.

[jacobsantos]

I have been using the next-version branch and the multi-drag is pretty sweet. I have been using it with VueDraggable and it works well.

The only thing I have found is that you have to start dragging in order for the onChoose action to accept all of the items that are active. This appears true even if you query the selectors, the list that is returned is the same as the items in the onChoose event.

It would be nice if there were either an onSelect action that returned all of the active items or really just the multidrag elements. It looks like in the code there is a check whether it is dragging to update. I haven't investigated completely but it might be better to always send the multidrag elements.

I will likely take a look and might submit a pull request for this. I figure you who know the code would have a better grasp of how this should be implemented.

[owen-m1]

@jacobsantos I am going to add this event, but if you need it sooner please feel free to create a pull request.

[jacobsantos]

@owen-m1 Thanks!

I am not sure how long it will take or when you will add it. If it is a few days, then I won't bother. If it is a few weeks, then I will go ahead and submit a pull request.

I found a workaround and that is to start multidragging and then drop. This will trigger the onChoose event with all of the active items selected, either onDrop or onDrag. I think onDrag. I will just have a note to start dragging and then drop and then click on the actions. Just the usability of everything else is pretty sweet but it just looks from the user's perspective as if the site is bugged.

I thought about handling the selection process myself and realized that was crazy since the library does that job very well. Look at the code, I thought I saw the areas where it could be changed, but as with any library, the owner's vision for a solution could be different from my (possibly and likely) hacked version.

[owen-m1]

@jacobsantos I will try to do it tomorrow.

[owen-m1]

@jacobsantos The events onSelect and onDeselect have been added in latest commit on next-version branch.

[jacobsantos]

Thanks! That looks even better than I hoped. I will give it a try and let you know.

…

On Sun, Apr 14, 2019, 7:01 PM Owen Mills ***@***.***> wrote: @jacobsantos <https://github.com/jacobsantos> The events onSelect and onDeselect have been added in latest commit on next-version branch. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1377 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATOPmUJkU5FGuUMVczmoWuk4JUv2zsIks5vg8FEgaJpZM4Xt4bD> .

[jacobsantos]

@owen-m1 Works exactly. I had to update Vue.Draggable to accept the new action.

[marinalozovanu]

When it will be available the release with new features added in next-version branch?
Thanks!

[owen-m1]

@marinalozovanu Still a while. I am now looking into making multi dragging and swapping optional plugins rather than built into the main script. But you can use the file currently available on the github branch in the meantime.

[kinjal-codes]

Is next version in broken state ? Getting following when dropping from one source to another.

Sortable.js:1576 Uncaught TypeError: Cannot read property '_animationCallbackId' of undefined
at Sortable._animateAll (Sortable.js:1576)
at Sortable._dragStarted (Sortable.js:906)

[owen-m1]

@Soneshdabhi It is supposed to be stable but it may have bugs. I will investigate this bug.

[owen-m1]

@Soneshdabhi Solved in 4feb960

[christianmcfarland]

@owen-m1 Thank you for the updates, this is a fantastic project.

@jacobsantos Can you provide an example of multi-select, multi-drag and drop working with Vue Draggable? We have it almost working but receive this error on drop:

helper.js:32 Uncaught TypeError: Cannot read property 'nextSibling' of undefined
    at l (helper.js:32)
    at VueComponent.onDragRemove (vuedraggable.js:398)
    at Sortable.<anonymous> (vuedraggable.js:37)
    at _dispatchEvent (Sortable.js:2407)
    at Sortable._onDrop (Sortable.js:1951)
    at Sortable.handleEvent (Sortable.js:2043)```

[jacobsantos]

@owen-m1 Thank you for the updates, this is a fantastic project.

@jacobsantos Can you provide an example of multi-select, multi-drag and drop working with Vue Draggable? We have it almost working but receive this error on drop:

helper.js:32 Uncaught TypeError: Cannot read property 'nextSibling' of undefined
    at l (helper.js:32)
    at VueComponent.onDragRemove (vuedraggable.js:398)
    at Sortable.<anonymous> (vuedraggable.js:37)
    at _dispatchEvent (Sortable.js:2407)
    at Sortable._onDrop (Sortable.js:1951)
    at Sortable.handleEvent (Sortable.js:2043)```

I forgot how I fixed this.

A working example is on the vuedraggable page. You just need to remember that multiDrag is converted to multi-drag, per Vue documentation.

<ul>
    <draggable multi-drag>
        <li>{{ item }}</li>
    </draggable>
</ul>

@c-mac88 I would also recommend downloading the latest commit, since it is working for me. The multi-drag sortable js has to replace the release sortablejs. Vuedraggable does not require any updates and will accept any new event and attribute to pass to sortablejs.

I would need code in order to help. All I did was follow the documentation for vuedraggable, sortablejs and vue documentation. And a lot of experimentation.

[christianmcfarland]

@jacobsantos Thank you for your response! I have been getting better results with some of your suggestions. Here is a JS fiddle I put together that is a stripped down version of our problem:

https://jsfiddle.net/oxhvr3ze/6/

If you try to select multiple elements from the column on the right and drag them to the column on the left, it appears that they move. However the array length only changes by one no matter how many you select and drag.

If you have a moment please take a look and let me know if you see anything I'm missing.

Thanks again!

[jacobsantos]

@c-mac88 That is weird. Certainly seems like a bug. https://jsfiddle.net/hsfmyb7j/1/

I am not using string groups with my usage. I am using the :group="{...}" object usage. The element bug occurs since the first selected item appears to be deselected when dropped. This makes sense actually. Part of the fix appears to be to deselect all items or figure out why the items weren't being deselected on end.

The second is that if you select the reselect the deselected item, it will clone that item and crash. Nope. Once it keeps the items selected, then it will crash. I believe with my implementation it is deselecting on drop end. I am not sure why it is not deselecting on drop end.

The only thing I can suggest is using the :group="{...}" and see if that works.

EDIT: It does not.

[holmberd]

I was looking for this feature as well so will start testing it out.

[kinesias]

I had been waiting for this feature and I love it!! Thanks so much!!!
One suggestion: it would be nicer if the user had to press the ALT key for selecting multiple items (like in a file browser). Now, it feels strange that multiple elements are selected by default after a normal click.

[owen-m1]

@kinesias There is now a multiDragKey option

[stuta]

When doing straight drag without first selecting the item then the item is not cloned from original list, instead of cloning it is moved from the original list. If I first select the item then it is cloned.

Is this a bug?

My options:

group: {
  name: 'element',
  pull: 'clone',
  put: false // Do not allow items to be put into this list
},
multiDrag: true

[owen-m1]

@stuta Thanks, should be fixed in 7cb2fe4

[owen-m1]

This feature has now been merged into the master branch, and therefore I will close this issue.