0

http://jsfiddle.net/prince4prodigy/vR2DU/7/

ドラッグされたdivの位置を計算するにはどうすればよいですか?

ウィンドウのサイズを変更すると、div の 'left' & 'top' プロパティが表示されますが、div をドラッグすると、'left' & 'top' プロパティは計算されません (リアルタイム)

HTML:

<div id="container" class="container-container-fluid">
     if you drag div, 'left' & 'top' property dont computing (real time)
     <div id="div1" class="item drag">div</div>
</div>

<div id="left"></div>
<div id="right"></div>

JS:

$(function(){

       $( ".drag" ).draggable({ 
         containment : '#container'

       }); 


       function wResize() {

         var winW = $(window).width();
         var Body = $('body');
         var d = $('#div1').position();


         $('#div1').css({
             position:'absolute',
             color:'red'}); 

        //show value of left & top property
         $('#left').html('left : ' + d.left )
         $('#right').html('top : ' + d.top)

 }

 wResize();

$(window).resize(function() {
    wResize();
});

});

編集: jsfiddle が編集されました。もう一度ご覧ください。

4

5 に答える 5

2

メソッドdrag内にイベントがあります。draggable()この関数は、「ドラッグ」があるたびに呼び出されます。

$( ".drag" ).draggable({ 
    containment : '#container',
    tolerance: 'touch',
    drag:wResize
});

JSFiddle

于 2013-07-17T14:04:07.990 に答える
1

これを試してみてください。関数をドラッグ イベントにバインドし、関数で定義したのと同じコードを実行します。

$(".drag").draggable({
        containment: '#container',
        tolerance: 'touch',        
            drag: function(){
                var winW = $(window).width();
                var Body = $('body');
                var d = $('#div1').position();
                $('#left').html('left : ' + d.left)
            $('#right').html('top : ' + d.top)
            }

    });

ここにデモがあります

于 2013-07-17T14:06:24.330 に答える
0

これを試してみてください....デモ 

           $(function(){    
             $( ".drag" ).draggable({ 
             containment : '#container',
             tolerance: 'touch',
               drag: function(e,u){                  
             $('#left').html('left : ' + u.position.left )
             $('#right').html('top : ' +u. position.top)                   

               }
           });
于 2013-07-17T14:14:21.350 に答える