jQuery: перетаскивание, удаление и изменение размера изображений?

Question

Я работаю над простым перетаскиванием и изменением размера веб-приложения с помощью jquery и jquery ui.

проблема, что у меня есть, что мне нужно удалить ручки, когда изображение не выбрано, и чтобы они снова отображались при выборе изображения.

Я могу сделать это с помощью DIV без каких-либо проблем, но когда я использую образы <img> вместо div, как только ручки на углах изображения исчезнут, я не могу заставить их снова появиться!

Я создал полностью рабочий jsfiddle здесь, чтобы продемонстрировать проблему.http://jsfiddle.net/7btkn17q/

Я использовал 1 с DIV и 1 <img>, так что вы можете увидеть проблему для себя.

в приведенном выше примере перетащите изображения книги в DIV Bellow, и как только вы их найдете там, щелкните где-нибудь за пределами изображений, и ручки исчезнут. чтобы вернуть ручки, вам нужно снова щелкнуть изображения.

Как вы можете видеть, изображение с тегом <img> не позволяет ручкам снова появляться, но изображение, которое является фоном div, заставит ручки снова появиться.

Это код для создания ручки появляются и исчезают по щелчку:

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

любая помощь будет оценена.

Answer 1

Это потому, что img находится внутри div с классом drag. img сама не соответствует условию

.is("#droppable .drag") 

, так как это не .drag.

Вам необходимо найти класс drag в предках щелкнутого элемента. jQuerys closest делает это:

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

Answer 2

Если вы хотите, чтобы показать сопротивление ручки при нажатии на изображение, вы должны сделать находку родителя изображений, так как это изображение, возвращается в качестве цели. (IMG является двойников к ручкам)

// 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/