Question

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

编辑了jsfiddle，请再次查看。

如何计算拖动的div的位置？

如果重新调整窗口大小，则可以看到“左”和“左”。 div的'top'属性但是如果你拖div，'left'＆amp; 'top'属性不计算（实时）

HTNL：

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

});

Answer 1

drag方法中有draggable()个事件。每次有“拖动”时都会调用此函数：

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

JSFiddle

Answer 2

为什么你不使用Draggable DIV的拖拽事件

你可以这样使用

drag: function( event, ui ) {
var l=ui.position.left;
var t=ui.position.top;
}

Answer 3

试试这个，它会将一个函数绑定到拖动事件并执行你在函数中定义的相同代码：

$(".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)
            }

    });

以下是demo

Answer 4

我认为这就是你所追求的：

$(function () {

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

    $(window).resize(wResize);

});

function wResize() {

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

    if (winW < '600') {

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

        $('#left').html('left : ' + d.left)
        $('#right').html('top : ' + d.top)
    }
}

您必须使用resize函数初始化可拖动插件作为拖动参数。

我创建了fiddle

Answer 5

试试这个.... DEMO

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

               }
           });

如何计算拖动的div的位置

5 个答案: