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 · Answer 1 · 2014-05-23T10:01:22.407

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 '14 at 10:01

answered May 23 '14 at 09:00

Brewal

8,067
2
24
37

The problem is that it could be text too, I'm going to update the post. Thanks. – chemitaxis May 23 '14 at 09:09
As long as your text box is not inline, this should not be a problem – Brewal May 23 '14 at 09:11
My text I updated the code, please check! ;) Thanks in advance! Regards! – chemitaxis May 23 '14 at 09:15
You mean, you want the text to size down, not just the dimensions of his box ? – Brewal May 23 '14 at 09:17
I want to size down all the elements inside the "draggable workspace", like works Desktop Apps – chemitaxis May 23 '14 at 09:19
I think that the problem is in the width and the height of the element draggable, the jQuery UI thinks that it has not change... (if you see the inspecto, the size is 200x200). – chemitaxis May 23 '14 at 09:21
Ok, I understood your solution because in this moment, I'm scaling 0.5 and your code update to two (double)... if the scaling is dinamyc, could your code works? Thank you so much... – chemitaxis May 23 '14 at 09:30
Yes, when resizing the object, you simply call this line changing the `$(this).width()/2` by `$(this).width()*ratio` and then change the css using jQuery. – Brewal May 23 '14 at 09:33
Well, there is a small mistake in my code. I will edit this soon using dynamic ratio – Brewal May 23 '14 at 09:39
Wow that was quite tricky ! You will have some issues with handle but I'll let you find out how to correct this – Brewal May 23 '14 at 10:01
If you help me to solve the problem with the cursor, you will be my hero :) – chemitaxis May 23 '14 at 10:10
And another problem... if you change the screen size, the image is out... why? – chemitaxis May 23 '14 at 10:11
Well, it is quite hard to achieve all this... I would recommand you to use [jQuery.resizable()](http://jqueryui.com/resizable/#constrain-area) from `jQuery UI` and see [this question](http://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale). – Brewal May 23 '14 at 10:17

jQuery Drag with CSS Transform with jQuery UI

1 Answers1