Question

那里有一个神秘的标题，希望你能帮忙:)。

当我拖动其中一个Draggables时，它会自行克隆，但不会掉落在droppables上：（

任何想法？

我的代码：

<!DOCTYPE HTML>
    <html>
    <head>
        <title>jQi</title>
        <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var i = 0;
                var a = 250;
                var b = 19;

                //append board
                $('body').append('<ul id="jQiBoard"></ul>');
                while (i < b*b) {
                    $('ul#jQiBoard').append('<li class="jQiNode"></li>');
                    i++;
                }

                //init mouseover
                $('li.jQiNode').stop().mouseover(function() {
                    $(this).animate({
                        opacity: 0.65
                    }, a);
                });
                $('li.jQiNode').stop().mouseout(function() {
                    $(this).animate({
                        opacity: 1.00
                    }, a);
                });

                //append stones
                $('body').append('<ul id="jQiStones"></ul>');
                $('ul#jQiStones').append('<li class="jQiWhite"></li>');
                $('ul#jQiStones').append('<li class="jQiBlack"></li>');

                $('li.jQiWhite').draggable({
                    snap: 'li.jQiNode',
                    helper: 'clone',
                    zIndex: 100,
                    stop: function(event, ui) {

                    }
                });
                $('li.jQiBlack').draggable({
                    snap: 'li.jQiNode',
                    helper: 'clone',
                    zIndex: 100,
                    stop: function(event, ui) {
                        alert(ui.draggable);
                    }
                });
                $('li.jQiNode').droppable({
                    accept: 'li.jQiNode'
                });
            });
        </script>
        <style type="text/css">
            ul#jQiBoard { width: 570px; height: 570px; float: left; margin: 0; padding: 0; border: 2px solid black; }
            li.jQiNode { display: block; width: 30px; height: 30px; float: left; list-style-type: none; border: 0px solid silver; background-color: #ae996f; background-image: url(jQiNode.gif); }
            ul#jQiStones { padding: 10px; border: 1px solid silver; float: left; margin: 0; padding: 0; }
            li.jQiWhite { width: 30px; height: 30px; background-color: transparent; list-style-type: none; background-image: url(jQiWhite.gif); }
            li.jQiBlack { width: 30px; height: 30px; background-color: transparent; list-style-type: none; background-image: url(jQiBlack.gif); }
        </style>
    </head>
    <body>

    </body>
    </html>

Answer 1

那么，您应该将该事件处理程序附加到droppable对象，而不是draggable。我做了那个改变，以及我设置的这个jsfiddle的各种其他改变。去看看：http://jsfiddle.net/VQfhW/

Answer 2

我将您的代码更改为：

$(document).ready(function() {
    var i = 0;
    var a = 250;
    var b = 19;

    //append board
    $('body').append('<ul id="jQiBoard"></ul>');
    while (i < b*b) {
        $('ul#jQiBoard').append('<li class="jQiNode"></li>');
        i++;
    }

    //init mouseover
    $('li.jQiNode').stop().mouseover(function() {
        $(this).animate({
            opacity: 0.65
        }, a);
    });
    $('li.jQiNode').stop().mouseout(function() {
        $(this).animate({
            opacity: 1.00
        }, a);
    });

    //append stones
    $('body').append('<ul id="jQiStones"></ul>');
    $('ul#jQiStones').append('<li class="jQiWhite"></li>');
    $('ul#jQiStones').append('<li class="jQiBlack"></li>');

    $('li.jQiWhite').draggable({
        snap: 'li.jQiNode',
        helper: 'clone',
        zIndex: 100,
        stop: function(event, ui) {

        }
    });
    $('li.jQiBlack').draggable({
        snap: 'li.jQiNode',
        helper: 'clone',
        zIndex: 100,
        stop: function(event, ui) {
            alert(ui.draggable);
        }
    });
    $('li.jQiNode').droppable({
        accept: '.jQiWhite, .jQiBlack'
    });
});

差异在droppable的json中。我改变了接受价值。因为你接受了jQiNode，它是可以放置的元素。在接受中你必须选择可以放在那里的可拖动元素，而不是可放置的元素。

祝你好运，在这里你可以尝试一下：http://jsfiddle.net/VQfhW/

Answer 3

嘿，我发现Draggable需要以下调用（在STOP函数内）： $(ui.helper).clone(true).removeClass('ui-draggable ui-draggable-dragging').appendTo('ul#jQiBoard');

Draggable已被删除并克隆，但克隆不可拖动

3 个答案: