function makeResourceDrag(arrIndexID) {
$('#imgA' + arrIndexID).resizable();
$('#imgA' + arrIndexID).draggable({
start: function(event, ui) {
isDraggingMedia = true;
},
stop: function(event, ui) {
isDraggingMedia = false;
// Set new x and y
resourceData[arrIndexID][4] = Math.round($('#imgA' + arrIndexID).position().left / currentScale);
resourceData[arrIndexID][5] = Math.round($('#imgA' + arrIndexID).position().top / currentScale);
}
});
}
This works fine if the resizeable line is taken out, but I want these images to be draggable and resizeable, I get funny behaviours if I try and make the same element have both attributes, does anyone know a way to make this work?
Thanks!
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();