Topic: drag and drop plugin + accordion
I have two panels, the left panel is an accordion. Within each accordion-body i have a list of sortable-item divs. The right panel is just a simple div with a list of sortable-item divs. I have the drag and drop plugin and it all seems to initalize ok - no errors... and now I am trying to drag stuff from the left panel into the right panel... except it's not working. There are no errors thrown. Only once somehow by magic was I able to drag something from the left panel into the right panel. It seems to be really flaky.
What's more, while experimenting and trying to find out why it's not really working, I accidentally uncovered a nasty bug with the mdb drag and drop. Just drag any of those sortable items and then while dragging (don't let go of the left mouse button) click on the right mouse button to bring up the browser context menu. Once in a while, the item I was dragging is now stuck in lala-land and you can never get to it again.
Here is a link to my test page -
https://dev.wdetech.app/?weblink=service/Test
Please help.
Ok, now the website works for me. I can also see what's going on. Before that, I did not pay attention to it. I can see that this error also appears on our website, but not always. We'll check what's going on and fix it.
Marvin Herbold priority commented 3 years ago
Don't forget to also fix the right-click (context menu) issue that happens sometimes while you are dragging something. It will sometimes leave the item you are dragging on the page with no way to get back to it. It is lost forever until you reload the page.
I created a snippet here -
https://mdbootstrap.com/snippets/standard/marvin_herbold/2920015
Unfortunately it behaves differently because of the problem that you mentioned only occurs in your snippets. Instead - here is a video recording showing the issue. You'll notice that as soon as I drag over the item to the other side, it appears as the last item in the list. Then when I continue dragging it up into the list itself, it chews up the last 2 items in the list. When I drop it, it all goes back to normal. I repeat this demonstration several times in the video.
Here it is -
- Go to the MDB5 drag and drop page.
- Click on "coping items" - yes you have a typo on the page.
- Click on "Open in MDB editor" for the "coping items" HTML snippet
- It doesn't work well at all. Dragging stuff over from the top to the bottom panel is glitchy. Sorting items in the bottom panel is glitchy.
I am using latest Chrome on Windows 10 if that makes any difference.
This glitchiness is the same problem I am experiencing - so it's not really related to the use of an accordion at all - it's just glitchy out of the box.
Grzegorz Bujański staff commented 3 years ago
It looks like this problem only occurs with our snippets. We'll fix it. But I can see that using the plugin in the project everything works fine. Are these problems also present in your project?
Marvin Herbold priority commented 3 years ago
It does work better in my own project - but there is still the issue of right clicking (to bring up the browser context menu) while dragging/sorting leaving the elements in a weird place that you can never get back.
Marvin Herbold priority commented 3 years ago
Dragging over an item from one panel to another also makes the last few items you just dragged over disappear, but when you drop it, the panel fixes itself.
1) Visit this link - https://dev.wdetech.app/?weblink=service/Test&what=dragAndDrop 2) Drag a few things over from the left panel to the right panel 3) Now drag over one more item and slowly bring it up so it touches the last item in the list in the right pane... poof it disappears! Drop the item you are dragging, and it comes back.
Grzegorz Bujański staff commented 3 years ago
Unfortunately, the link provided does not work for me. A modal with an error appears
Marvin Herbold priority commented 3 years ago
Yeah sorry this is a live development site so things break all the time. You probably gave it a try while it was in the middle of an update of some kind. It should be working again - give it a try now.
Grzegorz Bujański staff commented 3 years ago
I tried yesterday and today several times. The same all the time. A modal with an error
Marvin Herbold priority commented 3 years ago
Ok - I'm going to try and copy the HTML over to your snippet editor and let you know if that worked.
Marvin Herbold priority commented 3 years ago
BTW I do not understand why you are getting an error when trying to visit https://dev.wdetech.app/?weblink=service/Test&what=dragAndDrop this morning before I came into work. It's working fine on our end. Can you share what error you are getting in the modal?
Marvin Herbold priority commented 3 years ago
I checked our logs and I figured out why you were not able to visit our site. You have your browser set to a language other than EN-US and that was causing some untested code to run. We have fixed the issue and you should be able to see our site now with your browser language set to anything other than EN-US.
I built a quick demo in which I tried to recreate this problem: https://distec6d.mdbgo.io/ unfortunately I am not able to reproduce this problem in it. maybe I missed something? Was it about such a solution?
Update - I noticed that if I drag really fast from left to right, it'll bring the item over from the left panel to the right panel. Seems to me maybe that means perhaps some animation is interfering with the drag and drop.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes