Javascript jQuery：在单击退出时删除可调整大小的句柄，并在单击进入时添加它们？_Javascript_Jquery_Jquery Ui

Javascript jQuery：在单击退出时删除可调整大小的句柄，并在单击进入时添加它们？

javascript jquery jquery-ui

Javascript jQuery：在单击退出时删除可调整大小的句柄，并在单击进入时添加它们？,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在尝试使用jquery创建一个简单的拖放和调整页面大小的页面到目前为止一切正常。但现在我面临着一个新的挑战这是当前的流程： 1-用户将图像（div）拖放到父div上。 2-用户将看到一个带有手柄的拖放图像克隆，以便他们可以轻松调整图像（div）的大小基本上，我需要做的是删除句柄（helper），如果用户想调整DIV的大小，在上单击out并再次添加它们，如果他们再次在DIV内单击因此，我尝试使用以下代码： $("#droppable").find(".ui-resizable-hand

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

到目前为止一切正常。但现在我面临着一个新的挑战

这是当前的流程：

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

基本上，我需要做的是删除句柄（helper），如果用户想调整DIV的大小，在

上单击out

并再次添加它们，如果他们

再次在DIV内单击

因此，我尝试使用以下代码：

$("#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>


load（“jquery”，“1.6.3”）；
google.load（“jqueryui”，“1.8.16”）；
$（文档）.ready（函数（）{
var x=null；
//使元素可拖动
$（“.drag”）.draggable({
助手：“克隆”，
光标：“移动”，
公差：“适合”
});
$（“#可拖放”）。可拖放({
drop：函数（e、ui）{
如果（$（ui.draggable）[0].id！=“”）{
x=ui.helper.clone（）；
helper.remove（）；
$（“#可拖放”）.find（“.ui可调整大小的句柄”）.remove（）；
x、 拖拉的({
//助手：'原始'，
安全壳：“#可下降”，
公差：“适合”
});
x、 可调整大小({
动画：对，
//专题：16/9，
助手：“ui可调整大小的助手”，
手柄：“北、东、南、西、西北、东北、西南、东南”
});
x、 附加到（“#可拖放”）；
}
}
});
});
上校{
浮动：左；
填充物：5px 5px 5px；
保证金：5px 5px 5px 5px；
}
#可乐{
宽度：500px；
高度：820px；
边框：1px实心#CCC；
浮动：左；
}
.拖{
宽度：100px；
高度：100px；
位置：相对位置；
背景尺寸：包含！重要；
背景重复：无重复；
浮动：左；
左边距：10px；
边缘顶部：30px；
边框：实心1px#CCC；
}
.拖动：悬停{
不透明度：0.6；
过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/
}
#可降落{
宽度：720px；
高度：820px；
边框：1px实心#CCC；
}
#可拖放。拖动{
宽度：200px；
高度：220px；
背景尺寸：200px；
边界：无；
}
.新班级{
宽度：200px；
高度：220px；
背景尺寸：200px；
边框：实心4px#666；
}
.ui可调整大小的句柄{
宽度：10px；
高度：10px；
背景色：#ffffff；
边框：1px实心#000000；
}
.ui-可调整大小-n{
顶部：-10px；
左：50%；
宽度：6px；
高度：6px；
}
.ui-可调整大小-e
{
右：-10px；
最高：50%；
宽度：6px；
高度：6px；
}
.ui-resizable-s
{
底部：-10px；
左：50%；
宽度：6px；
高度：6px；
}
.ui-可调整大小-w
{
左：-10px；
最高：50%；
宽度：6px；
高度：6px；
}
.ui可调整大小nw
{
左：-10px；
顶部：-10px；
宽度：6px；
高度：6px；
}
.ui可调整大小
{
顶部：-10px；
右：-10px；
宽度：6px；
高度：6px；
}
.ui可调整大小的软件
{
底部：-10px；
左：-10px；
宽度：6px；
高度：6px；
}
.ui可调整大小的se
{
底部：-10px；
右：-10px；
宽度：6px；
高度：6px；
}
.ui可调整大小的帮助程序{
边框：1px点#CCC；
}

我很抱歉发布了我的全部代码，我确实尝试创建了一个工作的jsfidle，但似乎jsfidle不喜欢jquery.uiurl

有人能就这个问题提出建议吗

如果要检测某个特定元素之外的单击，可以通过将单击处理程序附加到顶级元素（通常为

文档

）并查看

事件.目标

）来实现

要重新插入以前从DOM中删除的元素，必须使用

.detach（）

而不是

.remove（）

。但是，获得相同视觉效果的更好方法是简单地使用

隐藏

和

显示

来切换css属性

显示：

，因为您不必关心需要在哪里重新插入分离的元素。它看起来像：

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

这几乎就是我想要的。但您的解决方案（代码）的问题在于，它将为

#可拖放

区域内的所有图像添加（显示）可调整大小的

.ui句柄

！单击.drag后，是否有任何方法可以单独显示.ui可调整大小的句柄？我尝试使用

this

，但这使代码停止工作。

上述处理程序中的this
将是顶级元素。尝试使用$（e.target）.find（“.ui可调整大小的句柄”）.show（）