Capture all div elements from the table and store them in an array

Check out this code snippet that includes draggable divs and a droppable table: http://jsbin.com/exetuk/1/edit

When dragging a div to the table, copies of the div with the class .draggable appear.

I am looking to create an array with divs from the table where each element has the following structure:

var arrayOfDivs = [{topPosition, leftPosition, lat, lng},{topPosition, leftPosition, lat, lng},{topPosition, leftPosition, lat, lng},{topPosition, leftPosition, lat, lng}, ... ]

Is it possible to achieve this?

Apologies for any language shortcomings. Thank you!

javascriptjqueryhtmlcssarrays

Answer №1

Can you explain the concept of lefPosition and topPosition in this scenario? From where should their values be derived?

A possible JavaScript script demonstrating this could look like:

var arrayOfDivs = [];

$("#table .draggable").each(function(index, item){
   var lat = $(item).attr("lat");
   var lng = $(item).attr("lng");
   var top = ??????;
   var left = ??????;
   arrayOfDivs.push({topPosition : top, leftPosition: left, lat : lat, lng : lng});
});

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

Issue with WordPress navigation menu bug

On my website, I have implemented WP nav menu and it seems to be functioning correctly. However, I am facing an issue with the sub link under the home link. The screenshot shows the problem clearly. In the provided image, the "support our work" sub link a ...

csswordpresshtml

Execute Javascript to simultaneously open various links in a single action (not using popups)

I am looking to open multiple URLs with a single click event that also redirects to a specified URL. I have attempted this, but it doesn't seem to be working as intended. Here is the HTML code: <a id="mybutton" href="http://example.net/quote" onc ...

javascriptjquery

Can a photo frame app be created using PhoneGap?

I'm looking to develop an application where I can capture a picture, crop the face of a person, and then embed this face into a frame. Is there a solution using PhoneGap for this task? Can anyone provide some ideas on how to get started? Thank you i ...

javascriptandroidjqueryioscordova

Collaborating on user authorization within a MEAN.JS framework

Recently, I decided to dive into the world of web application development by using MEAN.js full stack solution. Using the generators within MEAN.js, I was able to effortlessly create multiple CRUD models along with all the necessary express routes. In ad ...

javascriptnode.jspassport.jsmean-stackmeanjs

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

I am incorporating a modal that corresponds each element of the object newCompanies to a specific row: {newCompanies.map((company, index) => { return ( <div> <div className="side- ...

javascriptcssreactjs

Implementing text wrapping within input elements for optimal print.css layout

Can you help me with a print.css issue I'm experiencing? I am currently working on my print stylesheet and I've encountered a challenge where I need to word wrap input fields to ensure all the text is displayed correctly. Despite trying various ...

css

Newbie exploring the world of Rails and jQuery

While I am making progress with jQuery and successfully linking js.erb files to controller actions, I have encountered a roadblock. I am unsure of how to make a button, which is not associated with a controller action, trigger specific jQuery commands. My ...

javascriptjqueryruby-on-rails

Navigate to Angular Link using Scope Data

I have the user's GPS location, which is not fixed. From the frontend, I need to open it as a Google Maps link. <a href="#" ng-click='window.open("https://www.google.com/maps/place/{{data.usergps}}", "_system", "location=yes"); return false;& ...

javascriptangularjs

Guidelines on Transferring Variables to a JavascriptExecutor Script

Currently, I am utilizing C# and Selenium to browse through a website and have come across an issue regarding passing variables into my JavaScriptExecutor command. When I attempt to do so using the code below: ((IJavaScriptExecutor)webdriver).ExecuteScript ...

javascriptc#seleniumselenium-webdriver

Uploading Files Using Ajax to a PHP Class

Having some trouble with my file upload using AJAX to post to an object-oriented PHP class. Here's the AJAX code: var handleUpload = function(event) { event.preventDefault(); event.stopPropagation(); var fileInput = document.getElement ...

javascriptajax

What is the best way to disable the functions doajax_red and doajax_blue when a radio button is checked?

Is there a way to halt the functions doajax_red and doajax_blue when a radio button is checked? Upon loading the page index.php, clicking the red button will display a loading image. If you check the BLUE radio button and then re-check the RED radio butt ...

javascriptphpjqueryhtmlcss

Retrieve the total count of tables within a specific div element

If I have an unspecified amount of tables within a div, how can I determine the total number of tables using either plain JavaScript or jQuery? ...

javascriptjqueryhtml

Newbie in PHP: Techniques for transferring PHP variables between different sections of PHP code

In my project, I have a file named index.php which is responsible for uploading files to the server and setting PHP variables such as $target_folder_and_file_name. This index.php file also includes the following line (originally it was in an index.html fi ...

phpjavascripthtmlsessionstate

A TypeScript method for accessing deeply nested properties within an object

I'm currently working on a function that utilizes typings to extract values from a nested object. With the help of this post, I managed to set up the typing for two levels successfully. However, when I introduce a third (known) level between the exis ...

javascripttypescript

Triggering a server-side event handler in ASP.NET using client-side JavaScript

I need help with implementing a countdown timer in JavaScript. When the timer reaches 0 seconds, I would like the page to trigger the button1_click event handler. Here's the scenario: I am working on a quiz engine where the quiz responses need to be ...

asp.netjavascript

Error thrown by Text.splitText due to AJAX request

I have a javascript webpage where I am attempting to make an Ajax request like this. <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style. ...

javascriptjqueryajaxpostweb-frontend

What are the reasons for the various methods available for importing my JS code?

Here is the structure of my folders: --public ----frontend.js --views ----fontend.ejs The frontend.js file is located inside the public folder, while the frontend.ejs file is in the views folder. In my HTML / EJS file, I included the JavaScript (fronten ...

javascripthtmlnode.jsejs

Is there a way to retrieve multiple arrays from a function?

If I need to pass 6 arrays from one method to another in a different class, what would be the most efficient approach and why? Here's the code snippet I have at the moment. public Object getData()throws FileNotFoundException{ counter = 0; S ...

javaarrays

Aligning MaterialUI Grid items vertically within various Grid containers

Looking to implement a design that features three vertical columns. The first and last columns will display MaterialUI cards, while the middle column will showcase a vertical line with dots aligned vertically with the start of each card. The height of the ...

htmlcssreactjsmaterial-ui

Having trouble parsing FormData in the django backend

Greetings everyone! I hope you are all doing well. I've been working on a custom form that needs to be sent to the Django backend using an AJAX request. The challenge I'm facing is that when I wrap the form into FormData, it works fine on the fro ...

javascriptpythondjangoajaxforms