jQuery：在点击时删除可调整大小的句柄并在点击时添加它们？

Question

我正在尝试使用 jquery 创建简单的拖放和调整页面大小。

到目前为止一切正常。但是现在我又遇到了新的挑战。

这是当前进程：

1- 用户将图像 (div) 拖放到父 DIV 上。 2- 用户将看到带有手柄的拖放图像的克隆，以便他们可以轻松调整图像大小 (div)。

基本上，我需要做的是删除 clickout 上的句柄（助手），如果用户想要调整 DIV 的大小并且 click inside the DIV again.

所以我尝试使用此代码：

$("#droppable").find(".ui-resizable-handle").remove();

只有当新图像被拖放到舞台上时，上面的代码才会删除手柄。另外，这也不是一个好方法，因为它会完全移除手柄，我无法再次重新添加它们。

这是我的全部代码：

<html>
    <head>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript" >
           google.load("jquery", "1.6.3");
           google.load("jqueryui", "1.8.16");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

        <script>
        $(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({

        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit'


    });

            $("#droppable").droppable({

                drop: function (e, ui) {

                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                        ui.helper.remove();
                        $("#droppable").find(".ui-resizable-handle").remove();

                    x.draggable({

                        //helper: 'original',
                        containment: '#droppable',
                        tolerance: 'fit'


                    });

                    x.resizable({

                      animate: true,
                      //aspectRatio: 16 / 9,

                      helper: "ui-resizable-helper",
                      handles: "n, e, s, w, nw, ne, sw,se"



                    });

                    x.appendTo('#droppable');

                }

                }
            });


});
        </script>
        <style type="text/css">
.col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:500px;
    height:820px;
    border:1px solid #CCC;
    float:left;

}

.drag{
    width:100px;

    height:100px;
    position:relative;

    background-size:contain !important;
    background-repeat:no-repeat;

    float:left;
    margin-left:10px;
    margin-top:30px;
    border:solid 1px #CCC;

}
.drag:hover{
    opacity: 0.6;
    filter: alpha(opacity=40); /* For IE8 and earlier */

}

#droppable{
    width:720px;
    height :820px;
    border:1px solid #CCC;

    }


    #droppable .drag{
        width:200px;
        height :220px;
        background-size:200px;
        border:none;


    }

.new-class{

        width:200px;
        height :220px;
        background-size:200px;
        border:solid 4px #666;
}

.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;


}
.ui-resizable-n{
     top: -10px;
    left:50%;
    width: 6px;
    height: 6px;


}
.ui-resizable-e
{
   right:-10px;
     top:50%;   
        width: 6px;
    height: 6px; 
}
.ui-resizable-s
{
     bottom: -10px;
    left: 50%;
        width:6px;
    height: 6px;
}

.ui-resizable-w
{
     left:-10px;
     top:50%;
        width: 6px;
    height: 6px;
}

.ui-resizable-nw
{
     left: -10px;
    top: -10px;    
        width: 6px;
    height: 6px;
}
.ui-resizable-ne
{
     top: -10px;
     right: -10px; 
        width: 6px;
    height: 6px;
}
.ui-resizable-sw
{
    bottom: -10px;
    left: -10px;
        width: 6px;
    height: 6px;
}
.ui-resizable-se
{
    bottom: -10px;
    right: -10px;
    width: 6px;
    height: 6px;
}

.ui-resizable-helper { 
border: 1px dotted #CCC; 
}


     </style>

    </head>
    <body>
        <div align="center" id="wrapper">

            <div class="col" id ="droppable">
            </div>



                <div class = "col" id="col1">
                <div id="drag1" class="drag" style="background-image:url(images/Chrysanthemum.jpg); background-position:center;"> </div>

                <div id="drag2" class="drag" style="background-image:url(images/Hydrangeas.jpg); background-position:center;" ></div>

               <div id="drag2" class="drag"  style="background-image:url(images/3.jpg); background-position:center;"></div>






            </div>
        </div>
    </body>
</html>

对于发布我的整个代码，我深表歉意，我确实尝试创建一个有效的 jsfidle，但它似乎不喜欢 jquery.ui URL.

有人可以就此问题提出建议吗？

Answer 1

如果您想检测落在特定元素之外的点击，您可以通过将点击处理程序附加到顶级元素（通常为 document）并查看 event.target 来实现.

要重新插入之前从 DOM 中删除的元素，您必须使用 .detach() 而不是 .remove()。但是，获得相同视觉效果的更好方法是简单地使用 hide 和 show 来切换 css 属性 diplay:，因为您不需要必须关心你需要在哪里重新插入分离的元素。它看起来像：

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

jQuery：在点击时删除可调整大小的句柄并在点击时添加它们？

jQuery: remove resizable handles on clickout and add them on click in?

javascript

jquery

jquery-ui