问使用jquery拖放、克隆和调整大小
EN

Stack Overflow用户

提问于 2012-05-11 15:07:34

回答 1查看 7.6K关注 0票数 1

我有一些jquery代码，我想要能够拖放，克隆和调整大小。我可以在第一次尝试时拖放和调整大小。在此之后，我在容器周围拖动克隆项，它不能再调整大小。知道为什么吗？

my HTML，css and jquery from dragndrop.js，如下所示

.col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:200px;
    height:500px;
    border:1px solid black;

}

.drag{
    width:100px;
    border:1px solid black;
    height:40px;
    position:relative;
    background-color:red;
}

#droppable{
    width:500px;
    height :500px;
    border:1px solid black;
    }

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="dragndrop.css" />
        <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 src="dragndrop.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="wrapper">
            <div class = "col" id="col1">
                <div id="drag1" class="drag">
                </div>
            </div>
            <div class="col" id ="droppable">
            </div>
        </div>
    </body>
</html>

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit'
    });

    $("#droppable").droppable({

        drop: function(e, ui) {

            x = ui.helper.clone();
                  x.draggable({
                helper: 'original',
                containment: '#droppable',
                tolerance: 'fit'
            });
            x.resizable({
                maxHeight: 40,
                minHeight:40,
                minWidth:50
            });
            x.appendTo('#droppable');
            ui.helper.remove();
        }
    });

});

jquery-ui

jquery

腾讯特效SDK 2.5折起

美颜基础/原子能力套餐低至1500元/月，提供丰富的美化能力，支持全平台集成

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-05-11 18:18:45

问题是你在克隆已经在droppable表面上的div。

我添加了check (可能需要更新)来查看id是否被设置(当它们被克隆时，id被设置为"")，如果它是空的，那么克隆并添加到droppable surface，否则，不要管它，它已经是droppable了。

        $("#droppable").droppable({

            drop: function (e, ui) {

                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                ui.helper.remove();
                x.draggable({
                    helper: 'original',
                    containment: '#droppable',
                    tolerance: 'fit'
                });
                x.resizable({
                    maxHeight: 40,
                    minHeight: 40,
                    minWidth: 50
                });
                x.appendTo('#droppable');
            }

            }
        });