1

jQueryと cssのdraggable()組み合わせについて、非常に具体的な質問があるかもしれません。divs私の体には、すべてドラッグ可能なものがたくさんあります。

for(var i = 0; i < 150; i++) {
        var randomleft = Math.floor(Math.random()*1000);
        var randomtop = Math.floor(Math.random()*1000);
        var appenditem = '<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>'
        $('body').append(appenditem);
        cubes.push($('#cube'+i));
    }

$('div').draggable();

ここまでは順調ですね。

次に<div id="fixed">、特定の位置で体を固定します。top: 50px; left: 50px;

私がやりたいことは、イベント ハンドラーをトリガーし、dragstopdragstop で現在ドラッグされている div から固定 div までの距離を取得することです。

たとえば、dragend では、div がドラッグされてから:値が欲しいと top: 500px; left: 40px思います。+450-10top: +450px-10px#fixed

どうすればこれを行うことができますか、特に負の値です。

前もって感謝します

4

2 に答える 2

2

ライブデモ

jQuery(function($) {

   var allCubes  = '',
       $fixed    = $('#fixed'),
       fixedOffs = $fixed.offset();

    for(var i = 0; i < 150; i++) {
        var randomleft = Math.floor(Math.random()*1000),
            randomtop  = Math.floor(Math.random()*1000);
        allCubes += '<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>';
    }  

    $('body').append(allCubes); // Outside loop! (60% more performance)

    $('[id^="cube"]').draggable({
        stop: function(ev, ui){
            var pos = ui.position; // or use ui.offset if you need document related position
            // var orgPos = ui.originalPosition; // if you need it
            alert(
               ( pos.left - fixedOffs.left )+' \n '+
               ( pos.top  - fixedOffs.top  )
            );
        }
    });  

});
于 2013-10-23T22:59:51.827 に答える
0

jQuery を使用しているので、必要なのはoffset()固定要素の だけです。停止コールバックのドラッグ可能なuiオブジェクトもこの情報を提供します。残りは簡単な計算です:

// assuming the stop callback of draggable()
stop: function( event, ui ) {
    var fixedOffset = $("#fixed").offset();

    return {
        top: ui.offset.top - fixedOffset.top,
        left: ui.offset.left - fixedOffset.left,
    }
}

例の値を使用すると、この関数は次の値を持つオブジェクト リテラルを返します。{ top: 450, left: -10 }

于 2013-10-23T22:43:05.797 に答える