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/