CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Peter
Peter

Reputation: 11835

Jquery UI draggable - Using percents instead of pixels


i have a problem with jq-ui draggable.

I drag a DIV (on my home PC 1680x1024) into the right/bottom corner and save the position (left:125px; top:1536px;). Everything works fine. But when i switch to my netbook (1024x768) i get a stupid scrollbar. The problem is the different Screensize.

Is it possible to use percents instead of pixels on jquery ui draggable() und resizeable()?

Thanks in advance!
Peter

Upvotes: 1

Views: 2827

Answers (2)

user3629322
user3629322

Reputation: 109

Try this one :

$("element").draggable({
    stop: function (){
     var l = ( 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) )+ "%" ;
     var t = ( 100 * parseFloat($(this).css("top")) / parseFloat($(this).parent().css("height")) )+ "%" ;
     $(this).css("left" , l);
     $(this).css("top" , t);
     }

});

Upvotes: 2

Yasen Zhelev
Yasen Zhelev

Reputation: 4045

You could calculate the percentage of the total screen resolution for your my home PC 1680x1024 and position (left:125px; top:1536px;) it will be width: 125/1680 * 100 and height: 1536/1024 * 100 and then wen showing the DIV in laptop calculate the new position based on these percentages.

P.S. I am not sure that the position that you are have said is correct top should be less than 1024 (your monitor height).

Upvotes: 1

Related Questions