Jquery Draggable AND Resizable -

function makeresourcedrag(arrindexid) {      $('#imga' + arrindexid).resizable();      $('#imga' + arrindexid).draggable({         start: function(event, ui) {             isdraggingmedia = true;         },         stop: function(event, ui) {             isdraggingmedia = false;              // set new x , 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 resizeable line taken out, want these images draggable , resizeable, funny behaviours if try , make same element have both attributes, know way make work?

thanks!

looks it's because you're doing on <img>, jqueryui wraps in <div>, , draggable component of image happens within wrapping <div>.

try wrapping <img> in <div> (which if styled display:inline-block, "hug" size of image in both x , y axes), make <div> draggable (and therefore enclosed <img> well), , make <img> resizable (and since div hugs image, sits nicely).

working example: http://jsfiddle.net/vrugs/2/