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 回答
2

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

你可以使用这种方式

drag: function( event, ui ) {
var l=ui.position.left;
var t=ui.position.top;
}
于 2013-07-17T14:05:45.153 回答
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 回答
0

我想这就是你所追求的：

$(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 函数作为拖动参数来初始化可拖动插件。

我创造了一个小提琴

于 2013-07-17T14:06:08.863 回答