CODEWITHSUNDEEP
javascriptjqueryjquery-ui
naziiii
naziiii

Reputation: 117

How can I compute a dragged div's position

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

How can I compute a dragged div's position?

if you re-size the window you can see 'left' & 'top' property of div but if you drag div, 'left' & 'top' property don't computing (real time)

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

});

EDIT: the jsfiddle edited, please see it again.

Upvotes: 0

Views: 136

Answers (5)

George
George

Reputation: 36784

There is a drag event within the draggable() method. This function will get called every time there is a 'drag':

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

JSFiddle

Upvotes: 2

drizzie
drizzie

Reputation: 3361

I think this is what you're after:

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

You have to initialize the draggable plugin with the resize function as the drag parameter.

I created a fiddle

Upvotes: 0

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

Try this one....DEMO 

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

               }
           });

Upvotes: 0

Sandeep Thomas
Sandeep Thomas

Reputation: 4727

Why you dont use the drag event of the Draggable DIV

You can use this way

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

Upvotes: 2

isJustMe
isJustMe

Reputation: 5470

Try this, it will bind a function to the drag event and execute the same code you defined in your function:

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

    });

Here is the demo

Upvotes: 1

Related Questions