0

I have two divs. One with a border, same size of an image.

  • When I have a image (Tweet image, not rotated) it works.

  • When i move the rotated image (clown image), the div moves unwanted (at start drag)

  • The image is not at the same location.

How to solve this problem with css / jquery?

// putting images on screan
$("#img1").css({"top": "200px", "left": "100px"});
$("#img1").myrotate();
$("#img2").css({"top": "100px", "left": "300px"});
$("#img2").myrotate(); 

// rotating image 2 
rotateMe($("#img2"), 45);
rotateMe(selectedDiv, 45);



// here is the problem
div.draggable({
     drag: function() {
          id = $(this).attr("id").substring(3);    
          var pos = $(this).position();
          $("#" + id).css({"top": pos.top + "px", "left": pos.left + "px"});
     }
});

Fiddle over here

Johan Hoeksma
  • 3,534
  • 5
  • 28
  • 40
  • http://stackoverflow.com/questions/3523747/webkit-and-jquery-draggable-jumping maybe this help – Arpad Bajzath Apr 05 '13 at 14:20
  • It works a bit.. http://jsfiddle.net/zoutepopcorns/H2HRh/1/ The border image is not moving anymore. – Johan Hoeksma Apr 05 '13 at 14:58
  • Maybe for the image i can calculate the angle and distance like: http://stackoverflow.com/questions/11229040/how-to-get-the-position-of-element-transformed-with-css-rotate – Johan Hoeksma Apr 05 '13 at 15:22

0 Answers0