0

我有大量动态创建并随机附加到正文的 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以手动将它们放置在我想要的形状中。

之后，我想animate()用我之前拖动的位置从每个 arraydiv 中创建函数。

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]

希望你明白我的意思。

4

2 回答 2

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/

于 2013-10-26T19:21:28.080 回答
0

您可以使用 API 中的停止事件，例如（在您的 for 中）

$('#cube'+i).draggable({
    stop: function(){
            $(this).attr('data-posX', $(this).offset().left);
            $(this).attr('data-posY', $(this).offset().top);
    }
});

或将值存储为键：值对与#cube -id 或..

于 2013-10-26T19:55:06.833 回答