我正在尝试使用 jQuery 的 .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为了更好的解释。在 fiddle 上,索引保持在 2,并且位置仅在移动第三个应用程序时发生变化。
我想要的是能够获取所有单独应用程序的位置,并可能将它们保存在 cookie(或类似的东西)中的数组中,以便我可以在页面打开时将它们重新加载到最后的位置已刷新。
最佳答案
在普通 JavaScript 和支持 element.getBoundingClientRect 的现代浏览器中
以下两个示例均经过修改,以演示如何将每个元素获得的位置添加到数组中,以便稍后访问。
您可以通过此技术获取位置信息。
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
在上面的示例中,浏览器还必须支持 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);
关于 jsfiddle
关于javascript - 获取多个元素的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16241834/