Find rotated div top position from left

Question

I want find top position of rotated div from element, I can able find top position of element but I want top(Y pos) position from left(x) position.

I am used this

 var degree = degree;
        if (degree < 0) {
            var sign = -1;
        } else {
            var sign = 1;
        }
        var numY = Math.abs(myElem.position().top + sign * ((myElem.outerHeight() / 2) - Math.sin(degree)));
        var numX = 0
        var bottom = myElem.position().top + myElem.outerHeight(true);
        y = numY;

Thanks in Advance

Slope:20 deg, height: 20px,width:400px, left 150px i want find top position

enter image description here

I want to re arrange dragged items after rotation for that I am finding top position. Please find the jsbin link drop weights into plank.

Your question isn't very clear, but it looks like you can use the Pythagorean theorem to find the distance, since you can find the positions of the top of the div, and of the top of the element. — brenzy, Mar 07 '15 at 13:02

brenzy · Accepted Answer · 2015-03-08T15:55:01.843

1

I think it makes more sense to add the draggable image into the rotated div and to let everything rotate together, rather than worrying about the position of the draggable image. Here is a jsfiddle with your code updated (I only implemented dropping on the right side): http://jsfiddle.net/brendaz/17wwtffz/

drop: 
  // ...
  var offset = ui.draggable.offset();
  var rotateOffset = $('.rotatableAra').offset();
  // Take the weight out of it's parent div and add it to the rotatable area
  ui.draggable.remove();
  ui.draggable.addClass("dropped");
  ui.draggable.addClass("rightPlankDropped");
  $('.rotatableAra').append(ui.draggable);
  ui.draggable.css("top",  ($('.rightPlank').position().top- ui.draggable.height()).toString() + "px");
  ui.draggable.css("left", (offset.left - rotateOffset.left).toString() + "px");
  rightArray[ind] = $textval * pos;
  // ...

edited Mar 08 '15 at 15:55

answered Mar 08 '15 at 03:31

brenzy

1,976
11
20

Based on the first link, I had assumed you were using svg. I have updated my answer to rotate a dropped image. – brenzy Mar 08 '15 at 16:56
To get the rotated position you have to do some trigonometry to determine the radius: `var radius = (offset.left - xCenter) / Math.cos(degreesToRadians(19));` I've updated the jsfiddle above. To revert, take the weight out of the rotated div and put it back in it's original parent. You can do something similar for dragging, or only allow dragging within the rotated area. – brenzy Mar 09 '15 at 13:16
Everything is working fine except when parent is rotated draggable element position not along with cursor. I am trying to fix that issue. i am unable to achieve could you please help me in that. – Sarath Babu Nuthimadugu Mar 12 '15 at 11:35
I think I am close to a solution using client co-ordinates, and then rotating during the drag. I don't have time to look at this now, but I'll leave a comment tomorrow letting you know whether or not my solutions works. – brenzy Mar 13 '15 at 15:09
I added the code from this answer [http://stackoverflow.com/questions/10810857/inner-div-inside-an-outer-rotated-div-does-not-follow-mouse-in-case-dragging-wit#10898947](http://stackoverflow.com/questions/10810857/inner-div-inside-an-outer-rotated-div-does-not-follow-mouse-in-case-dragging-wit#10898947) to this [fiddle](http://jsfiddle.net/brendaz/etajyp36/) (again on the right side only) and the dragging works. You will need to clean up the code to get rid of the offsets from the cursor. – brenzy Mar 14 '15 at 04:34

Find rotated div top position from left

1 Answers1