Search code examples
jquerydraggableresizable

excluding img files from the .resizable 'img' function

On the page I'm working on there's a div-id (dragZone) that contains seperate div-ids which each contain one image these are all draggable, resizable and come forward when clicked upon.

To get the .resizable to work i filled in $('img').resizable but this is now ofcourse affecting all other images on the page.

Any idea how i can make the .resizable to only affect the image files that are in the dragzone-id?

$(document).ready(function() {
var a = 3;
$('#dragZone > div').draggable({
start: function(event, ui) 
{ $(this).css("z-index", a++); }})

$('img').resizable({maxHeight: 600, aspectRatio: true, animate: true });

$('#dragZone > div').click(function() {
    $(this).addClass('top').removeClass('bottom');
    $(this).siblings().removeClass('top').addClass('bottom');
    $(this).css("z-index", a++);

});
});
Solution

  • You can also use find method to find image elements inside dragZone:

    $('#dragZone').find('img').resizable({maxHeight: 600, aspectRatio: true, animate: true });