Jquery UI Draggable with Addition of CSS's Scale Transition Issue

Question

So, I am developing a responsive web tool that is built around the jQuery UI's Draggable function. There is also the use of CSS's transition: scale(X, Y) in there as well.

My issue is; When I scale an object inside of a container, the object is limited in the location of where I can drag it in the container. For a physical demo of this issue, please visit this CodePen.

The code is very basic, in the fact that the only Javascript is as follows:

$(function() {

    $('.workspaceObjects').draggable({

        containment: $('#ui_workspace'),

    });

});

So, it appears to be more of a CSS issue, but it has been puzzling me for a while now, and it is something that needs to be fixed to allow further development of my web tool. What can I do to fix this issue?

Basically, the container's size is increased to give it a zoom in effect. The scale of the object would increase to 1 when zooming was done, but so that the content of an object, such as text and images is displayed in a smaller scale, the element has been given the scale property. — Ryan
– Ryan, Commented Jun 16, 2015 at 19:43

Duncan Thacker · Accepted Answer · 2015-06-16 19:46:24Z

1

Solved using negative margin of 20px for the draggable, and centered the transform-origin to keep it balanced.

#container_object {
    transform-origin: 50% 50%;
    margin: -20px -20px
}

See http://codepen.io/anon/pen/KpvBgJ

answered Jun 16, 2015 at 19:46

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

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

2 Comments

Ryan Over a year ago

I noticed that the object jumps away from the mouse. How would I prevent this?

Duncan Thacker Over a year ago

Have a look at this, might solve your issue: stackoverflow.com/questions/13230437/…

Collectives™ on Stack Overflow

Jquery UI Draggable with Addition of CSS's Scale Transition Issue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related