CODEWITHSUNDEEP
javascriptjqueryimage
TERO
TERO

Reputation: 159

jQuery: drag, drop and resize images?

I'm working on a simple drag and drop and resize web application using jquery and jquery ui.

the problem that I have is that, I need to remove the handles when the image is not selected and make them appear again when the image is selected.

I can do this using DIV's without any problem now but when I use images <img> instead of div's, once the handles on the corners of the image disappeared, I cannot get them to reappear again!

I have created a fully working jsfiddle here to demonstrate the issue. http://jsfiddle.net/7btkn17q/

I have used 1 with DIV and 1 with <img> so you can see the issue for yourself.

in the example above, drag and drop the book images in the DIV Bellow them and once you have them both there, click somewhere outside of the images and the handle bars will disappear. to get the handles back you need to click on the images again.

as you can see, the image with <img> tag doesn't make the handles to reappear but the image which is the div's background, will make the handles reappear.

This is the code for making the handles appear and disappear on click:

        $(document).click(function(e) {
    // matches all children of droppable, change selector as needed
    if( $(e.target).is("#droppable .drag") ) {
        $(e.target).find(".ui-resizable-handle").show();
        $("#tools").show();
    }
    else {
        $("#droppable").find(".ui-resizable-handle").hide();
        $("#tools").hide();
    }
});

any help would be appreciated.

Upvotes: 0

Views: 2713

Answers (2)

Richard Fernandez
Richard Fernandez

Reputation: 599

If you're looking to show the drag handles when clicking the image, you need to do a find on the parent of the image, as it's the image that is being returned as the target. (img is sibling to the handles)

//    if( $(e.target).is("#droppable .drag") ) {
if( $(e.target).is("#droppable .drag img") ) { // if this then the big book one works as the image is picking up the click
    //$(e.target).find(".ui-resizable-handle").show(); // click on the div
    $(e.target).parent().find(".ui-resizable-handle").show(); // as img is sibling to handles, you need to get the parent, then do the find.

http://jsfiddle.net/7btkn17q/4/

Upvotes: 0

JNF
JNF

Reputation: 3730

It's because the img is inside the div with the drag class. The img itself does not match the 

.is("#droppable .drag")

condition since it isn't .drag.

You need to look for drag class in the ancestors of the clicked element. jQuerys closest does that:

if( $(e.target).closest(".drag").length > 0 )
    //also when putting handles, need to put them on the right element
    $(e.target).closest(".drag").find(".ui-resizable-handle").show();

Updated fiddle

Upvotes: 2

Related Questions