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 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!
Solution 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/
Solution 2:
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;
}
Solution 3:
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();
Solution 4:
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.
Solution 5:
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") });