Comparing the efficiency of Jquery draggable with thousands of elements versus updating the elements continuously

Currently, I am developing an application that involves dragging an image using Jquery's draggable utility. The image is accompanied by several overlay divs containing various components positioned based on pixel locations, sometimes reaching into the thousands.

Has anyone conducted performance tests to compare dragging all these elements simultaneously versus just the image and then re-rendering the rest post-drag?

I am leaning towards the latter method but would appreciate additional insights if available.

After careful consideration, I opted for a single svg layer with the Jquery draggable utility enabled 

$("#zones_imageSVG").draggable( "enable" );
, which contains multiple rectangles and circles. This setup allows smooth dragging of the svg layer without any lag or interruptions, providing a solution that bypasses the need for multiple div layers.

<svg id="zones_imageSVG" class="moveCursor" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="430" width="549.4444444444445" style="position: relative;">
<image id="zones_image" width="549.4444444444445" height="430" y="0" x="0" xlink:href="./images/testCampus1_HQ_floorA.jpg">
<circle id="icon_sensor0" class="handle_svgAttrCirc" cx="91.63777777777779" cy="287.14444444444445" r="1.9111111111111112" fill="red">
<circle id="icon_sensor1" class="handle_svgAttrCirc" cx="272.0466666666667" cy="332.9155555555556" r="1.9111111111111112" fill="red">
<circle id="icon_sensor2" class="handle_svgAttrCirc" cx="412.60888888888894" cy="221.40222222222224" r="1.9111111111111112" fill="red">
<circle id="icon_sensor3" class="handle_svgAttrCirc" cx="410.3155555555556" cy="103.8688888888889" r="1.9111111111111112" fill="red">
<rect id="idAttrRect0" class="handle_svgAttrRect" x="512.1777777777778" y="73.38666666666667" height="74" width="88" fill="#3196bd">
<rect id="idAttrRect1" class="handle_svgAttrRect" x="416.62222222222226" y="54.27555555555556" height="54" width="48" fill="#3196bd">
<rect id="idAttrRect2" class="handle_svgAttrRect" x="321.0666666666667" y="25.60888888888889" height="24" width="38" fill="#3196bd">
<rect id="idAttrRect3" class="handle_svgAttrRect" x="129.95555555555558" y="44.720000000000006" height="44" width="44" fill="#DC143C">
<rect id="idAttrRect4" class="handle_svgAttrRect" x="416.62222222222226" y="35.16444444444445" height="84" width="38" fill="#A1DC14">
</svg>
javascriptjqueryhtmlcssjquery-ui

Answer №1

Testing reveals that having 1000 subitems does not appear to cause any issues. However, the complexity of your subitems may affect this outcome.

Check out the JSFiddle

Here is the code used to create the sample div:

$(function () {
    $(".dragMe").draggable();

    var $dragMe = $(".dragMe.filled");

    var maxTop = 250;
    var maxLeft = 400;

    for (i = 0; i < 1000; i++)
    {        
        var $newSubItem = $("<div />")
            .addClass("subItem");

        var randomLeft = Math.random() * maxLeft;
        var randomTop = Math.random() * maxTop;

        $newSubItem.css({
            left: randomLeft,
            top: randomTop
        });

        $dragMe.append($newSubItem);
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I dynamically adjust an element's attribute as a user scrolls past it (creating a sticky effect)?

For instance, when you visit and try scrolling up, you will notice a bar displaying: "Typography Code Tables Forms Buttons Icons by Glyphicons" As you continue to scroll past the element, a class is added to alter the appearance. However, as you scrol ...

javascriptjquery

Highlighting Search Results in Kendo TreeView

I am currently working on a KendoTreeview project with spriteclass. My goal is to highlight both the root and child nodes with a specific search term. I have successfully implemented the search functionality, however, there is an issue that arises after th ...

javascriptjquerykendo-uikendo-treeview

Tips on showcasing a collection of orders stored in a database using Vue.js

After successfully updating my orders post payment, I am wondering how I can showcase them on my Vue front end. Below is the HTML template displaying the list of orders made: <template> <div> <div v-for="order in orders&quo ...

javascriptjsonvue.js

Triggering the onClick event in React to invoke another class components

I'm currently working on implementing a modal popup (stored in the PostView class) so that it appears when any post in the postcontainer class is clicked. As I am new to React, I would greatly appreciate any suggestions for enhancing the code. Post C ...

javascriptreactjs

I am in the process of transforming my basic JS Array into one that contains key/value

Currently, I am utilizing jQuery to create an Array in the following manner: var arr = new Array(); $('#some-form .some-input').each(function() { arr.push($(this).val()); ...

javascriptjqueryjson

Include a class for CSS styling in EJS using Node.js

Attention: Please be aware of the environment in this Application. The following technologies are being used: Windows NPM, Express MySQL This is the code in an ejs template called example.ejs <% if (message) { %> <p class="al ...

cssnode.jsexpressejs

The customized styling for Material Angular does not seem to properly apply to <md-card> elements within ui-views

I am trying to achieve a specific effect on the ui-views <md-card id="sidebar" flex="20" class="sche-card" layout-padding="true"> <div ui-view="card" autoscroll="false"></div> </md-card> However, I am facing an issue where the car ...

cssangularjspartialsangularjs-material

The communication between the child and parent components is failing to function correctly

I'm trying to send data from a child component to a parent component, but the function isn't being invoked correctly. It doesn't seem to work as expected. <router-outlet (activeElement)='getActive($event)'></router-outlet ...

javascriptangular

What is the best way to access the CSS font-size property using JavaScript?

I've attempted to adjust the font size using this code: document.getElementById("foo").style.fontSize Unfortunately, this code does not return any results. The CSS styles are all defined within the same document and are not in an external stylesheet ...

javascripthtmlcss

Tips for altering promises within nested for loops?

Presented below is a complex function that aims to extract model variants from a csv file, which are stored as strings in an array. The path of this csv file depends on information obtained from other csv files, hence the need for looping. The csvService. ...

javascriptangularjspromiseangular-promise

How can I prevent the browser's back button from functioning on an AngularJS webpage?

Is there a way to disable the browser's back button and refresh button in Angular? For example, in my source code: Page Source: "use strict"; .controller("wizardSecondController", function($scope, $state, $stateParams, wizardManager) { $scope.$on ...

javascriptjqueryangularjs

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

javascriptjquerycss

Vue.js and TypeScript combination may result in a 'null' value when using file input

I am attempting to detect an event once a file has been uploaded using a file input. Here is the JavaScript code: fileSelected(e: Event) { if ((<HTMLInputElement>e.target).files !== null && (<HTMLInputElement>e.target).files[0] !== null) { ...

javascripttypescriptvue.jsvuejs2

Spotfire: Changing a URL in an input field after it has been entered by the user

Currently, I am faced with a challenge related to importing a file in spotfire based on the path provided by the user. To accomplish this, I am utilizing a data function written in R script. In R, it is essential to note that all "\" characters are n ...

javascriptrspotfire

Express callback delaying with setTimeout

I'm working on a route that involves setting a data attribute called "active" to true initially, but then switching it to false after an hour. I'm curious if it's considered bad practice or feasible to use a setTimeout function within the ex ...

javascriptexpressweb-development-server

Exploring the functionality of JSON within the jQuery each method

I'm currently struggling with my JavaScript skills and attempting to piece this project together using various tutorials. However, I can't seem to identify why it's not functioning properly. Could someone guide me on how to properly pass an ...

javascriptjqueryjson

Next.js strips out query parameters

I've encountered an issue with my Next.js app. I have a page called my-page.jsx. Everything works fine when I navigate to /my-page?x=1&y=2 - the page is rendered correctly and the query parameters are read. However, the problem arises when the par ...

javascriptreactjsnext.js

Having trouble setting up npm package (fsevents) on Mac OS Catalina?

I'm facing an error when trying to run the npm install express --save command. Can someone assist me in resolving this issue? The error message is as follows: > email@example.com install /Users/delowar/Desktop/ytdl/node_modules/chokidar/node_modu ...

javascriptnode.jsmacosnpmmacos-catalina

Utilizing the CSS Top and Left attributes along with Jquery animations

There are two divisions on a page, namely Left_Div and Right_Div. The images in the Right_Div are positioned using CSS properties such as Top and Left. The Left_Div acts as a left panel, and upon clicking a button, both Left_Div and Right_Div animate to sl ...

jquerycssjquery-mobile

Sending a Django form using AJAX and jQuery: A step-by-step guide

After researching various tutorials on django AJAX forms, I've found that each one offers a different method, but none of them seem simple. Being new to AJAX, I'm feeling a bit confused by the complexity involved. In my specific case, I have a m ...

javascriptjqueryajaxdjangodjango-templates