Jquery Draggable AND Resizable

Question

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!

Answer 1

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/