Example of how to prevent an item being dragged into another group
See original GitHub issueHey, hey!
As per my last issue, I have a layout with a master list of items with different types, and a number of target lists:
I can drag items from the master to the targets, but only if the list is empty, or there if the list already contains items of the same type:
Turn Master List 1 List 2 Notes
1 A1 A2 B1 B2 Initial state
2 A2 B1 B2 -----> A1 Drag A1 to List 1, making it an A style list
3 A2 B2 --------------------> B1 Drag B1 to List 2, making it a B style list
4 B2 -----------------------x A2 Drag A2 to List 2, don't allow A's with B's!
I have to idea how to do this!
I presume I need to do some kind of check at some point, looping over the items of the target model (I am updating arrays, of course) but I donβt know in which handlers or callbacks to do this.
Is there any example code using the handlers and callbacks?
It is very confusing to me I have to say π¦
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
feat(drag-drop): prevent a item be removed when it into ...
I found when user drag the item into another container but not to release, the item is removed in origin container. When I...
Read more >javascript - Prevent dragging an item across rows
I have created a drag-drop task, where an individual is trying to unscramble a sentence. 4 of 5 words make a sentence and...
Read more >ondragover Event
The ondragover event occurs when a draggable element or a text selection is being dragged over a valid drop target. By default, data/elements...
Read more >Drag and drop - Patterns - Human Interface Guidelines
Using drag and drop, people can move or duplicate selected photos, text, and other content by dragging the selection from one location to...
Read more >Groups - jsPlumb Community Edition
dropOverride False by default. If true, child elements may be dragged outside of the Group element (assuming no other flag prevents this), but...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
OK, thanks! Iβll have a go.
PS. I hope you liked my diagram π
OK, slightly weird thing happening, not sure if it is related to this bug but the
shouldAcceptDrop
handler declared on theitem
is firing when I drag agroup
:I have separate
group-name
attributes on both containers.