1

我正在使用 jquery 的可拖动插件创建一个简单的拖放游戏。

div中有4种形状，圆形、方形、三角形和星形，以及4个下降区域：

<div class="drag">
    <div class="container">
        <div id="circle"></div>
    </div>
    <div class="container">
        <div id="square"></div>
    </div>
    <div class="container">
        <div id="triangle"></div>
    </div>
    <div class="container">
        <div id="star"></div>
    </div>
</div>
<div class="drop">
    <div class="container">
        <div id="circle"></div>
    </div>
    <div class="container">
        <div id="square"></div>
    </div>
    <div class="container">
        <div id="triangle"></div>
    </div>
    <div class="container">
        <div id="star"></div>
    </div>
</div>

例如，这是圆形的信息（请想象与其余形状相同）：

function init() {
$('.drag #circle').data('shape','circle').draggable({
    cursor: 'move',
    stack: '#circle',
    revert: true
});
    $('.drop #circle').data('shape','circle').droppable( {
        accept: '#circle',
        drop: handleDropEvent
    } );
};
init();

这是句柄放置事件：

function handleDropEvent( event, ui ) {
    var item = $(this).data('shape');
    var drop = $(this).data('shape');
    var dragItem = ui.draggable;
    if (item==drop){
        dragItem.position( { of: $(this), my: 'left top', at: 'left top' } );
        dragItem.draggable( 'option', 'revert', false );
        dragItem.draggable( 'disable' );
        $(this).droppable( 'disable' );
        correctMatch++;

    } 
    if ( correctMatch == 4 ) {
        $('.replay').show();
        $('.replay').click(function(){
            init();
        });
    }
}

现在在重播类中有一个重播按钮。如何让我的形状恢复到原来的位置？

4

1 回答 1

0

如果您保存了原始位置，则可以从头开始重建所有内容，然后再次使其全部可拖动。最简单的方法当然是重新加载页面，但我假设您不想这样做。因此，我可以想到几种方法：1）当文档准备好时，保存足够的信息以从头开始重建数组中的项目。我看到你有 4 个类：圆形、方形、三角形和星形。只需将 ID 按顺序存储在数组中

var initial_state=['circle', 'square', 'triangle', 'star']

然后每当用户单击重播按钮时，您就可以使用此信息进行重建。

$('.drag, .drop').html('')//Clean up the containers
var a='';
for (i in initial_state){
    a+='<div class="container" ><div id="'+i+'"></div></div>';//generate the html to append
}
$('.drag, .drop').append(a);//append it to the containers

那么您将不得不再次绑定可拖动函数，因为 DOM 已更改。

2）使用相同的数组，但将实际项目移动到它们的位置。这可能成为选择器的噩梦，但这是可能的。您始终可以将 DOM 元素分配给 var，然后在页面中随意移动它：

var circle= $('.drag.container #star').eq[0]

使用 eq 从一组元素中选择第一个/第二个/等元素。您必须确保只选择一个元素才能使代码正常运行。考虑到您在 html 代码中重复了 id。这是您要避免的事情，将它们更改为类，否则这种操作充其量只会变得棘手。

于 2012-05-22T05:34:06.443 回答