Search code examples
javascriptjqueryhtmlrotationposition

Find rotated div top position from left


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.


Solution

  • 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;
      // ...