代码之家 › 专栏 › 技术社区 › Barrie Reader

已删除并克隆了可拖动的,但克隆不可拖动

jquery-ui css jquery

Barrie Reader · 技术社区 · 15 年前

有点神秘的标题,希望你能帮忙:)

有什么想法吗?

<!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>

3 回复 | 直到 15 年前

Diego 15 年前

我将您的代码更改为:

$(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之前,wich是可拖放元素。在accept中,必须选择可拖放的元素,而不是可拖放的元素。

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

Yi Jiang G-Man 15 年前

好吧,你真的应该把事件处理程序附加到 droppable 对象,而不是 draggable . 我对这个jsfiddle做了这个更改,以及其他各种更改。去看看: http://jsfiddle.net/VQfhW/

Barrie Reader 15 年前

$(ui.helper).clone(true).removeClass('ui-draggable ui-draggable-dragging').appendTo('ul#jQiBoard');