使用 jQuery 拖放后将 DIV 重新定位到它们的第一个位置答案

【问题标题】：Re-position DIVs into their first place after drag and drop using jQuery使用 jQuery 拖放后将 DIV 重新定位到它们的第一个位置
【发布时间】：2014-06-23 17:09:33
【问题描述】：

我已将 5 个 div 设置为可拖动，并且每次拖放一个 div 都会移动到目标位置。如何设置初始化功能，以便按“再次播放！”掉落的卡片会回到拖放之前的位置。

这是我的代码的链接：

http://jsfiddle.net/k9NXv/2/

function init()
{
      $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );
    //Resetting the game
    var faces = ['happy','mad','sad','worried','guilty'];


    for (var i=0;i<5;i++)
    {
        $('#' + faces[i] + '').draggable({

            stack: '#faceSlot',
            cursor: 'move',
            revert: true
      });
    }

        $('#faceSlot').droppable({
                hoverClass: 'hovered',
                drop: handleCardDrop
                });
};

【问题讨论】：

是否可以只重新加载拖动和页面内容？
是的，我怎样才能做到这一点？
请看我的回答。只需将页面刷新添加到函数 init()

标签： jquery drag-and-drop

【解决方案1】：

在您当前的页面上使用：

<div id="mainContainer"> 
</div>
$(load);
function load(){
$.get( "../YourContent.html", function( data ) {
  $( "#mainContainer" ).html( data );
  $(init);
});
}

创建一个单独的页面，名为：YourContent.html 在此页面上包括：

function init()
{
      $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );
    //Resetting the game
    var faces = ['happy','mad','sad','worried','guilty'];


    for (var i=0;i<5;i++)
    {
        $('#' + faces[i] + '').draggable({

            stack: '#faceSlot',
            cursor: 'move',
            revert: true
      });
    }

        $('#faceSlot').droppable({
                hoverClass: 'hovered',
                drop: handleCardDrop
                });
};

function handleCardDrop(event,ui) 
{
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
   $(load);
};

这样，当您的页面加载时，它会使用 Load() 函数来检索包含脚本和游戏的页面，当您想要重置游戏时，只需调用 load() 函数。您可能必须将变量保留在该功能之外，但这应该让您了解基本设置/

【讨论】：