Question

我试图使用jQuerys .position和.each函数获取多个可拖动元素的各个位置。

这就是我到目前为止......

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>

以下是fiddle以获得更好的解释。在小提琴上，索引保持在2，并且只有在移动第3个应用程序时才会改变位置。

我想要的是能够获得所有单个应用程序的位置，并可能将它们保存在cookie（或类似的东西）中的数组中，以便我可以在页面的最后位置重新加载它们得到了更新。

Answer 1

在vanilla javascript和支持element.getBoundingClientRect

的现代浏览器中

以下两个示例都经过修改，以演示如何将每个元素的获取位置添加到一个可以在以后访问的数组中。

您可以通过此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);

在jsfiddle

上

在上面的示例中，broswer还必须支持Array.forEach和document.querySelectorAll

使用jquery，使用jQuery selectors，jQuery.each和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

关于JavaScript

JavaScript®（通常缩写为JS）是一种轻量级的解释，   面向对象的语言具有一流的功能，最为人所知   用于网页的脚本语言，但在许多非浏览器中使用   环境以及node.js或Apache CouchDB。

JavaScript标准是ECMAScript。截至2012年，所有现代浏览器   完全支持ECMAScript 5.1。旧版浏览器至少支持   ECMAScript 3.标准的第6个主要修订版正在进行中。   目前可以进行不同的新功能和改进功能   紧随其后的专用维基。

该网站的这一部分专门用于JavaScript语言   本身，非网页特定的部分或其他主机   环境。有关特定于网页的API的信息，请   看DOM。阅读更多关于DOM和JavaScript如何融合在一起的内容   DOM参考。

关于jQuery

jQuery是一个快速，小巧且功能丰富的JavaScript库。它使像HTML文档遍历和操作，事件处理，使用易于使用的API，动画和Ajax更简单横跨众多浏览器。结合多功能性和可扩展性，jQuery改变了数百万人的方式写JavaScript。

关于console.log

摘要

将消息输出到Web控制台。

关于Zero-based numbering

基于零的编号是编号，其中a的初始元素序列被赋予索引0，而不是索引1 典型的日常情况。

Javascript Array

数组是类似列表的对象，附带了几个内置方法执行遍历和变异操作。

获取多个元素的位置

1 个答案: