1

I have a similiar problem to this and this, the difference is that the zoom is on the draggable element and not on the container. I copied the jsFiddle provided on the second question mentioned above and changed the zoom property from the container to the element. You can find it here and the code is:

HTML

<div id="canvas">
    <div id="dragme"></div>
</div>

CSS

#canvas {
   width:500px;
   height:250px;
   border:1px solid #444;
}
#dragme {
   width:100px;
   height:50px;
   background:#f30;
   zoom:0.9;
}

JS

$('#dragme').draggable();

I tried to understand what's the problem but it seems every changes I try never work. The main problems are:

  • When I start dragging, the element moves up and to the left slightly;
  • The container boundaries are being incorrectly calculated;

Can you understand what's going on here? Thanks!

Community
  • 1
  • 1
bensampaio
  • 3,266
  • 5
  • 21
  • 19

1 Answers1

0

If it is absolutely not necessary, remove zoom from css. It does not play good with Jquery draggable. Check here for more info Jquery draggable with zoom problem

Then if you want to drag within canvas just add

containment: "parent"
Community
  • 1
  • 1
Yusuf Demirag
  • 773
  • 7
  • 10