Question

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

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

Answer 1

如果您保存了原始位置，则可以从头开始重建所有内容，然后再将其全部拖动。最简单的方法当然是重新加载页面，但我假设你不想那样做。因此，我可以想到几种方法： 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

然后你必须再次绑定draggable函数，因为DOM已经改变了。

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

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

使用eq，您可以从一组元素中选择第一个/第二个/ etc元素。您必须确保为代码选择一个元素才能正常运行。考虑到你的html代码中有重复的id。这是你想要避免的，将它们改为类或者这种操作最多也会变得棘手。

如何将可拖动恢复到原始位置？

1 个答案: