#383·draggable

Bug: Drag action is laggy when DOM is large on Google Chrome

Author: ccvivienCreated Mar 12, 2020Updated Jul 29, 2025

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