1

ドラッグ、ドロップ、クローン、サイズ変更できるようにしたいjqueryコードがいくつかあります。最初の試行でドラッグ アンド ドロップしてサイズ変更できます。その後、複製されたアイテムをコンテナの周りにドラッグすると、サイズを変更できなくなります。理由はありますか？

以下のように、dragndrop.js からの私の HTML、css、および jquery

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

});
4

1 に答える 1

2

問題は、ドロップ可能なサーフェスに既にある div を複製していたことです。

ID が設定されているかどうかを確認するためのチェック (更新が必要な場合があります) を追加しました (複製されたときに ID が "" に設定されていました)。空白の場合は、複製してドロップ可能なサーフェスに追加します。すでにドロップ可能。

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

于 2012-05-11T18:18:45.057 に答える