Jquery Draggable AND Resizable
Looks like it's because you're doing it on an <img>
, which jqueryui wraps in a <div>
, and then the draggable component of the image happens within the wrapping <div>
.
Try wrapping the <img>
in a <div>
(which if styled display:inline-block
, will "hug" the size of the image in both x and y axes), make the <div>
draggable (and therefore the enclosed <img>
will be as well), and make the <img>
resizable (and since the div hugs the image, it all sits nicely).
Working example: http://jsfiddle.net/vrUgs/2/
Resizable and draggable were causing all kinds of DOM shifting problems for me. There's a bug filed for this behavior; the temporary fix is to apply the following CSS, which worked for me:
.element { position: absolute !important;}
I was curious, here is working code that is draggable and resizable.jQuery:
jQuery(document).ready(function(event){ jQuery(".img").draggable().find("img").resizable();});
html:
<div class="img"> <img alt="" src="images/hard-disk-fingerprint.jpg"/></div>
other stuff i noticed, take or leave it, as I do not know the work involved in changing your JS.
first, all 'draggables' that are being dragged get a class of '.ui-draggable-dragging' which, you can use for your 'isDraggingMedia' logic potentially.
second, to get the current position accurately, I recommend using the ui.offset{top:"",left:""}, possible altered with the ui.position{top:"",left:""} describing the position of the 'helper' object relative to the item being dragged.
$('#div holding imgA+arrindexid').draggable({stop:function(event, ui){//isDraggingMedia = true; //replace this with a $().is(ui-draggable-dragging) check if possible where it matters in //your other javascript. // Set new x and y resourceData[arrIndexID][4] = Math.round(ui.offset.left / currentScale); resourceData[arrIndexID][5] = Math.round(ui.offset.top / currentScale); }}).find('img').resizable();