我有很多div被动态创建并随机附加到身体上。
var cubes = [],
allCubes = '',
$fixed = $('#fixed'),
for(var i = 0; i < 380; i++) {
var randomleft = Math.floor(Math.random()*Math.floor(Math.random()*1500)),
randomtop = Math.floor(Math.random()*Math.floor(Math.random()*1500));
allCubes += '<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>';
cubes.push($('#cube'+i));
}
然后我用jQueryUI
使它们全部拖拽,用手将它们放在我想要的形状中。
之后我想用我之前拖过的位置从每个arraydiv中制作animate()
个函数。
cubes[0].animate({ top: currentLeftposition, left: currentTopposition}, 500);
cubes[1].animate({ top: currentLeftposition, left: currentTopposition}, 500);
cubes[2].animate({ top: currentLeftposition, left: currentTopposition}, 500);
// and so on until 379
但我不想手工输入380 div的位置。在我想要的位置拖动每个div后,是不是可以自动创建这些功能。创建console.log()的方法我可以使用上面的函数复制和粘贴每个cubes[0]
- cubes[379]
希望你明白我的意思。
答案 0 :(得分:1)
这样的事情?
var cubes = '';
for (var i = 0; i < 380; i++) {
var rleft = Math.floor(Math.random() * Math.floor(Math.random() * 1500));
var rtop = Math.floor(Math.random() * Math.floor(Math.random() * 1500));
$('#content').append('<div class="cube" style="left: ' + rleft + 'px; top: ' + rtop + 'px;"></div>');
}
//defines cubes
var cube = $('.cube');
//drag get coord
cube.draggable().on('mouseup', function(i) {
cube.each(function() {
var nleft = $(this).offset().left;
var ntop = $(this).offset().top;
console.log('['+i+']'+nleft+','+ntop);
});
});
答案 1 :(得分:0)
您可以使用来自API的停止事件(在您的内部)
$('#cube'+i).draggable({
stop: function(){
$(this).attr('data-posX', $(this).offset().left);
$(this).attr('data-posY', $(this).offset().top);
}
});
或将值存储为key:value对与#cube -id's或..