jQuery：拖放和调整图像大小？

Question

我正在使用 jquery 和 jquery ui.

开发一个简单的拖放和调整大小的 Web 应用程序

我遇到的问题是，我需要在未选择图像时删除手柄，并在选择图像时让它们再次出现。

我现在可以使用 DIV 来做到这一点，但是当我使用图像 <img> 而不是 div 时，一旦图像角上的手柄消失了，我无法让他们再次出现！

我在这里创建了一个完整的 jsfiddle 来演示这个问题。 http://jsfiddle.net/7btkn17q/

我将 1 个与 DIV 一起使用，将 1 个与 <img> 一起使用，因此您可以自己查看问题。

在上面的示例中，将书籍图像拖放到 DIV 下方的 DIV 中，一旦它们都放在那里，单击图像外部的某个位置，手柄条就会消失。要取回手柄，您需要再次单击图像。

如您所见，带有 <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和dragclass里面。 img 本身与

不匹配

.is("#droppable .drag")

条件，因为它不是 .drag。

您需要在被点击元素的祖先中查找 drag class。 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/

jQuery：拖放和调整图像大小？

jQuery: drag, drop and resize images?

javascript

jquery

image