jQuery Drag with CSS Transform with jQuery UI

Question

I am trying to scale an element and drag this element to do a WorkSpace that can work in all screen resolutions.

The problem I have it that I can't do it works fine. If you try the Fiddle Code you can see that the elements that is being resized doesn't going to the final corner. I have read a lot of post like this (jQuery Drag/Resize with CSS Transform Scale) but the problem is when you reference a containment.

The fiddle code with the error example:

http://jsfiddle.net/yeD4b/4/

Updated: added text too

HTML

<div id="containerDragable">
<img id="img_messi" style="display: inline; position: absolute; z-index: 101; " src="http://www.elconfidencial.com/fotos/noticias_2011/2012090245messi_dentro.jpg" />

<div id="text_example">hi!</div>

CSS

  #containerDragable {
    width: 80vw; 
    height: 45vw;
    background-color: rgb(227, 227, 227);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position:absolute;
}

#img_messi
{
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;   
    -webkit-transform: scale(0.5);
    position:absolute;
}
#text_example
{
    font: normal 36px arial,sans-serif;
    position:absolute;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;   
    -webkit-transform: scale(0.5);
}

JavaScript

$(function () {
        $('#img_messi').draggable({
            containment: "#containerDragable", cursor: "move", scroll: false

        });
    });

$(function () {
        $('#text_example').draggable({
            containment: "#containerDragable", cursor: "move", scroll: false

        });
    });

Thanks!!

Brewal · Accepted Answer · 2014-05-23 10:01:22Z

2

Don't use CSS to scale your image. Use jQuery instead :

Demo jsFiddle

$('#img_messi').width($('#img_messi').width()/2);

Edit :

To fit better to your needs, if you have to use the scale css property, you should use this simple workaround with negatives margins :

Demo jsFiddle

$(this).css('margin', '0 -'+($(this).width()/2)+'px -'+($(this).height()/2)+'px 0');

That's quite ugly yet it works...

Edit : with dynamic ratio

Ok this is a tough one... The main trick here is to set the margin to top, right, bottom and left.

The demo

See this :

var verticalOffset = ($(this).height() - $(this).height()*ratio)*0.5;
var horizontalOffset = ($(this).width() - $(this).width()*ratio)*0.5;

Here $(this).height() is the original height of the DOM (same for width). You substract to this itself times the ratio, and then divide the whole by 2 (*0.5) because the margins are on top and bottom (same for left and right).

edited May 23, 2014 at 10:01

answered May 23, 2014 at 9:00

Brewal

8,1942 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

chemitaxis Over a year ago

The problem is that it could be text too, I'm going to update the post. Thanks.

Brewal Over a year ago

As long as your text box is not inline, this should not be a problem

chemitaxis Over a year ago

My text I updated the code, please check! ;) Thanks in advance! Regards!

Brewal Over a year ago

You mean, you want the text to size down, not just the dimensions of his box ?

chemitaxis Over a year ago

I want to size down all the elements inside the "draggable workspace", like works Desktop Apps

|

Collectives™ on Stack Overflow

jQuery Drag with CSS Transform with jQuery UI

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related