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/

Answer 2

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

Answer 3

If you apply the resizable first, you can then apply the draggable to the img's parent; which is the new div created by applying resizable.

chartImg.resizable({ animate: true,
            ghost: true,
            handles: 'n,s,e,w,ne,se,nw,sw',
            start: function (event, ui) { startResize(event, ui); },
            resize: function (event, ui) { monitorResize(event, ui); },
            stop: function (event, ui) { stopResize(event, ui); }
        }).parent().draggable({ containment: $(".chartPane") });

Answer 4

The code responsible for this was a workaround for something else: ​Github link which point to Bug 1749.

// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
    el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
}

The fix itself exists since the beginning of time: ​Github Bug Fixed link for Jquery

// bugfix #1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {

    // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
    var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position'));
    var dscrollt = sOffset ? o.documentScroll.top : 0, dscrolll = sOffset ? o.documentScroll.left : 0;

    el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
}

And was effectively just updated once, 7 years ago: ​Updated Link

// bugfix #1749
        // bugfix for http://dev.jquery.com/ticket/1749
        if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
            // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
            var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position'));
            var dscrollt = sOffset ? this.documentScroll.top : 0, dscrolll = sOffset ? this.documentScroll.left : 0;

            el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
            el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
        }

Reference : jquery link

Answer 5

Make sure jquery-ui.css is referenced in your project!

Per this question: Resizable, draggable object in jquery. Possible? if you simply include jquery-ui.css it will work. It solved my problem when none of these did. My code is simple:

$(element).resizable().draggable();

This was draggable but not resizable. Nothing else worked. Adding the CSS allowed resizing with no extra divs or code.

Answer 6

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;
}