Jquery Draggable AND Resizable

Question

function makeResourceDrag(arrIndexID) {

    $(\'#imgA\' + arrIndexID).resizable();

    $(\'#imgA\' + arrIndexID).draggable({
        start: function(event, ui) {
          


        

Answer 1

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:

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();