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，看起来jsfidle似乎不喜欢jquery.ui URL。

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

Answer 1

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

要重新插入先前从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：删除clickout上的可调整大小的句柄并在点击时添加它们？

1 个答案: