Question

我有很多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]

希望你明白我的意思。

Answer 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);
    });
});

做了一个小提琴：http://jsfiddle.net/filever10/YFVXM/

Answer 2

您可以使用来自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或..

获取元素的位置并创建它的数组函数

2 个答案: