制作拖放立方体游戏

Question

我试图制作一个拖放游戏，您可以选择3个立方体中的一个，然后将其放在4x4等距平面上。下垂时，前面的立方体应该在后面的立方体上，它们应该与网格对齐。我使用http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/上的教程作为基础知识，但我无法实现所有功能。

我该怎么做？是否有可以使用的有用资源？

</script>
  $( init1 );
  function init1() {
    $('#makeMeDraggable1').draggable( {
      containment: '#gameFull',
      cursor: 'move',
      snap: '#gameFull',
      helper: 'clone'
    } );
  }

  $( init2 );
  function init2() {
    $('#makeMeDraggable2').draggable( {
      containment: '#gameFull',
      cursor: 'move',
      snap: '#gameFull',
      helper: 'clone'
    } );
  }
  $( init3 );
  function init3() {
    $('#makeMeDraggable3').draggable( {
      containment: '#gameFull',
      cursor: 'move',
      snap: '#gameFull',
      helper: 'clone'
    } );
  }
</script>

<div id="gameFull">
  <div class="drop_game">
    <img src="/wordpress/wp-content/themes/cubic/img/one_game.svg">
  </div>

  <div class="cubic_one_game">
    <div>
      <img id="makeMeDraggable1" class="singleCube" src="/wordpress/wp-
content/themes/cubic/img/cube_one_1.svg">
      <p>moduł kuchenny</p>
    </div>
    <div>
      <img id="makeMeDraggable2" class="singleCube" src="/wordpress/wp-content/themes/cubic/img/cube_one_1.svg">
      <p>moduł sypialniany</p>
    </div>
    <div>
      <img id="makeMeDraggable3" class="singleCube" src="/wordpress/wp-content/themes/cubic/img/cube_one_1.svg">
      <p>moduł łazienkowy</p>
    </div>
  </div>
</div>