i'm attempting to enable this element to be both draggable and rotatable.
However, when I apply transform:rotate(0deg);, I am able to drag it anywhere within the parent container. But when I set it to 90deg, there are certain areas that become undraggable and it also extends outside of the parent container.
<div id="container">
<div id="myitem"><p>my rotate/drag</p></div>
CSS:
#container{
width:500px;
height:500px;
background:red;
}
#myitem{
width:115px;
height 50px;
background:black;
transform-origin:top left;
transform: rotate(90deg);
-ms-transform-origin:top left;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-webkit-transform-origin:top left;
}
see the example here click here for a sample of the issue
I have found a solution to the problem!
If you capture $(foo).offset().left when setting the css scale, the value does not match the actual position when using transform-origin: top left;
To solve this, replace
$(foo).offset().left with parseInt($(foo).css('left').replace('px',))position to absolute after running: foo{ top: 0; left: 0; position: absolute; }:)
The issue arises when detecting transform-origin and the discrepancy in positions when applying a scale(). Can it be calculated by %?