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 の or..

于 2013-10-26T19:55:06.833 に答える