This is a very simple implementation of dragging elements in html/js. I'm working on a web application that could have thousands of draggable elements on screen at any given time.Currently, this code works perfectly as shown below (with only one draggable element), however if I copy and paste that element (<span class=draggable>This is draggable</span>) a few thousand times (I've been using around 4000 for testing) page load is significantly slower, and the framerate slows considerably. I can understand the page load slowing due to the number of elements, but is there anything that can be done to ensure the frame rate remains smooth while dragging an element given large numbers of draggable elements in the DOM?Note - The implementation here deliberately ignores various issues like scrolling and so on that I will be implementing later, and I believe will have a largely negligible effect on performance. If that's an incorrect assumption please let me know.dragdrop.html<!doctype html><html>    <head>        <title>Drag + Drop</title>        <link rel=stylesheet type=text/css href=dragdrop.css />    </head>    <body>        <div id=draggableItemContainer class=noselect>            <span class=draggable>This is draggable</span>        </div>        <script src=https://code.jquery.com/jquery-1.12.4.min.js></script>        <script type=text/javascript src=dragdrop.js></script>    </body></html>dragdrop.cssspan {    position:absolute;    background: #FF8888;    cursor: pointer;}.noselect {    -webkit-touch-callout: none;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}dragdrop.jsvar dragDrop = (function() {    var elementBeingDragged;    var clickPointOffsetX;    var clickPointOffsetY;    function _dragging(e) {        elementBeingDragged.style.left = (e.clientX - clickPointOffsetX) + px;        elementBeingDragged.style.top = (e.clientY - clickPointOffsetY) + px;    }    function _stopDrag(e) {        document.removeEventListener('mousemove', _dragging);        document.removeEventListener('mouseup', _stopDrag);    }    function startDrag(e) {        elementBeingDragged = this;        document.addEventListener('mouseup', _stopDrag);        document.addEventListener('mousemove', _dragging);        var rect = elementBeingDragged.getBoundingClientRect();        clickPointOffsetX = e.clientX - rect.left;        clickPointOffsetY = e.clientY - rect.top;    }    var publicAPI = {        startDrag: startDrag    };    return publicAPI;})();$(function() {    $('#draggableItemContainer').on('mousedown', '.draggable', dragDrop.startDrag);});
Making thousands of DOM elements draggable with JavaScript
javascript;performance;jquery;html;dom