获取多个元素的位置

Question

I am trying to get the individual positions of multiple draggable elements using jQuerys .position and .each functions.

This is what i have so far...

JS

function newAppDraggable() {
    $('.App').draggable({
        containment: "#AppBox",
        grid: [ 60, 60 ],
        stack: ".App"
    });
};

$(function() {
    $('.AppList').droppable({
        accept: ".App",
        tolerance: 'fit',
        drop: function(event, ui) {
            $(".App").each(function( index ) {
            var position = $(this).position();
            var posTop = position.top;
            var posLeft = position.left;
            $( "#posThis" ).html(index+":"+posTop+":"+posLeft);
            });
        }
    });
});

HTML

<div class="AppList">
    <div id="TimenDate" class="App Fixed Size110x350">
    </div>

    <div id="User" class="App Fixed Size110x290">
    <p id="posThis"></p>
    </div>

    <div id="Weather" class="App Fixed Size110x350">
    </div>
</div>

Here is a fiddle for better explanation. On the fiddle the index stays at 2 and the positions only change when the 3rd app is moved.

what I would like is to be able to get the positions of all the individual apps and possibly save them in an array in a cookie (or something of the sort) so that i can reload them in their last positions when the page is refreshed.

Answer 1

In vanilla javascript and on modern browsers that support element.getBoundingClientRect

Both of the following examples have been modified to demonstrate how the attained positions of each element can be added to an array that can then be accessed later.

You could get the position information with this tecnique.

var apps = document.querySelectorAll(".App"),
    positions = [];

Array.prototype.forEach.call(apps, function (app, index) {
    var positionInfo = app.getBoundingClientRect();

    positions.push(positionInfo);
    console.log(index + ":" + positionInfo.top + ":" + positionInfo.left);
});

console.log(positions);

On jsfiddle

In the above example the broswer must also have support for Array.forEach and document.querySelectorAll

Using jquery, it would be something like this, using jQuery selectors , jQuery.each and jQuery.position

var apps = $(".App"),
    positions = [];

$.each(apps, function (index, app) {
    var positionInfo = $(app).position();

    positions.push(positionInfo);
    console.log(index + ":" + positionInfo.top + ":" + positionInfo.left);
});

console.log(positions);

on jsfiddle

About JavaScript

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB.

The JavaScript standard is ECMAScript. As of 2012, all modern browsers fully support ECMAScript 5.1. Older browsers support at least ECMAScript 3. A 6th major revision of the standard is in the works. The current progress of different new and improved features can be followed on the dedicated wiki.

This section of the site is dedicated to the JavaScript language itself, the parts that are not specific to Web pages, or other host environments. For information about APIs specific to Web pages, please see DOM. Read more about how DOM and JavaScript fit together in the DOM Reference.

About jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

About console.log

Summary

Outputs a message to the Web Console.

About Zero-based numbering

Zero-based numbering is numbering in which the initial element of a sequence is assigned the index 0, rather than the index 1 as is typical in everyday circumstances.

Javascript Array

Arrays are list-like objects that come with a several built-in methods to perform traversal and mutation operations.