Question

我有一些jquery代码，我希望能够拖放，删除，克隆和调整大小。我可以在第一次尝试时拖放并调整大小。之后我将克隆的项目拖动到容器周围，它无法再调整大小。知道为什么吗？

我的HTML，css和jquery来自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();
        }
    });

});

Answer 1

问题在于您正在克隆已放置在可放置表面上的div。

我添加了check（可能需要更新）以查看id是否已设置（当它们被克隆时，id被设置为“”）并且如果它是空白然后克隆并添加到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');
            }

            }
        });

在此处查看完整演示http://jsfiddle.net/ezzxX/2/

拖动drop clone并使用jquery调整大小

1 个答案: