Bug: Drag action is laggy when DOM is large on Google Chrome
My use case is somewhat similar to this example https://shopify.github.io/draggable/examples/multiple-containers.html
I have two columns, with elements I can drag and drop between the two. The dragging action is initilized with sortable = new Sortable(document.querySelectorAll('.freq-question-list'), draggable: '.freq-question')
Below these two columns, I have a <select> (unrelated to draggable action) with many options (about 2000).
On chrome, the drag and droping action is unresponsive and very slow. If I remove the select from the DOM, the problem disappears and everything is smooth again.
I have no such problem on firefox.
I am able to reproduce this problem by copying the html code of the select and inserting it at the end of the body in this demo page: https://shopify.github.io/draggable/examples/multiple-containers.html
You can easily reproduce it on your side, simply generate a <ul> with ~2000 <li>, and insert it at the end of the body on the demo page. The drag and dropping action will get unresponsive and laggy.
- Library version: 1.0.0-beta.8
- Browsers: Chrome v80.0.3987.132
- Tech stack: Rails + webpacker
- Other information: Works well on firefox
Source: Shopify/draggable