title: Drag and drop, inheriting css property, and creating a clone helper
body: <p>I've tried to make a cube game and have a couple of issues. I can't seem to make the blocks in front cover up the ones behind. Is there a way I can inherit a z-index css property from the object the cube is dropped on? </p>
  
  <p>The other problem is that I can't make the <em>helper: clone,</em> function to work in my situation. The clone doesn't snap to the grid and just returns to it's position.</p>
  
  <p>css:</p>
  
  <pre><code>/*gameResources*/
  
  .drop_zone {
    height: 350px;
    width: 650px;
    background-image: url("/wordpress/wp-content/themes/tadek/img/one_game.svg");
    margin: 0 auto;
    position: relative;
  }
  
  .drop_zone * {
    height: 55px;
    width: 108px;
    background-color: red;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  
  .drop_block_1 {
    top:  50px;
    left: 325px;
  }
  
  .drop_block_2 {
    top: 90px;
    left: 255px;
  }
  
  .drop_block_3 {
    top: 90px;
    left: 395px;
  }
  
  .drop_block_4 {
    top: 130px;
    left: 185px;
  }
  
  .drop_block_5 {
    top: 130px;
    left: 325px;
  }
  
  .drop_block_6 {
    top: 130px;
    left: 465px;
  }
  
  .drop_block_7 {
    top: 175px;
    left: 115px;
  }
  
  .drop_block_8 {
    top: 175px;
    left: 255px;
  }
  
  .drop_block_9 {
    top: 175px;
    left: 395px;
  }
  
  .drop_block_10 {
    top: 175px;
    left: 535px;
  }
  
  .drop_block_11 {
    top: 215px;
    left: 185px;
  }
  
  .drop_block_12 {
    top: 215px;
    left: 325px;
  }
  
  .drop_block_13 {
    top: 215px;
    left: 465px;
  }
  
  .drop_block_14 {
    top: 255px;
    left: 255px;
  }
  
  .drop_block_15 {
    top: 255px;
    left: 395px;
  }
  
  .drop_block_16 {
    top: 295px;
    left: 325px;
  }
  
  
  #gameFull {
    margin: 0 auto;
      width: 650px;
    padding: 10px 0 0 0;
  }
  
  .gameRow1 {
    text-align: center;
    margin: 50px;
  }
  
  .gameRow2 {
      text-align: center;
    margin: 50px;
  }
  .gameRow3 {
      text-align: center;
    margin:50px;
  }
  
  .gameCell {
    display: inline-block;
    width: 146px;
    height: 170px;
    margin: 0 -0.15%;
  }
  
   .singleCube {
     cursor: move;
     cursor: grab;
     height: 170px;
     width: 146px;
   }
  
   .cubic_one_game {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     font-size: 14pt;
     letter-spacing: 2pt;
   }
  </code></pre>
  
  <p>javascript, jQueryUI, javasript and html:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $( init0 );
  
  function init0() {
    $( ".makeMeDroppable1" ).droppable({
      accept: "#makeMeDraggable1, #makeMeDraggable2, #makeMeDraggable3",
      drop: function(event, ui) {
         var $this = $(this);
         ui.draggable.position({
           my: "center",
           at: "center",
           of: $this,
           using: function(pos) {
             $(this).animate(pos, 200, "linear");
           }
         });
       }
    });
  
  }
  
  
  $( init1 );
  
  function init1() {
    $('#makeMeDraggable1').draggable( {
      containment: '#gameFull',
      cursor: 'move',
      revert: "invalid",
      appendTo: ".makeMeDroppable1"
    } );
  
  
  }
  
  $( init2 );
  
  function init2() {
    $('#makeMeDraggable2').draggable( {
      containment: '#gameFull',
      cursor: 'move',
      revert: "invalid",
      appendTo: ".makeMeDroppable1"
    } );
  }
  
  $( init3 );
  
  function init3() {
    $('#makeMeDraggable3').draggable( {
      containment: '#gameFull',
      cursor: 'move',
      revert: "invalid",
      appendTo: ".makeMeDroppable1"
    } );
  }
  
  &lt;/script&gt;
  &lt;div id="gameFull"&gt;
  &lt;div class="drop_zone"&gt;
    &lt;div class="drop_block_1 makeMeDroppable1"&gt;&lt;/div&gt;
    &lt;div class="drop_block_2 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_3 makeMeDroppable1"&gt;&lt;/div&gt;
    &lt;div class="drop_block_4 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_5 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_6 makeMeDroppable1"&gt;&lt;/div&gt;
    &lt;div class="drop_block_7 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_8 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_9 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_10 makeMeDroppable1"&gt;&lt;/div&gt;
    &lt;div class="drop_block_11 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_12 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_13 makeMeDroppable1"&gt;&lt;/div&gt;
    &lt;div class="drop_block_14 makeMeDroppable1"&gt;&lt;/div&gt;&lt;div class="drop_block_15 makeMeDroppable1"&gt;&lt;/div&gt;
    &lt;div class="drop_block_16 makeMeDroppable1"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
    &lt;div class="cubic_one_game"&gt;
      &lt;div&gt;
        &lt;img id="makeMeDraggable1" class="singleCube" src="../wordpress/wp-content/themes/tadek/img/cube_one_game-01.svg"&gt;
        &lt;p&gt;moduł kuchenny&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img id="makeMeDraggable2" class="singleCube" src="../wordpress/wp-content/themes/tadek/img/cube_one_game-02.svg"&gt;
        &lt;p&gt;moduł sypialniany&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img id="makeMeDraggable3" class="singleCube" src="../wordpress/wp-content/themes/tadek/img/cube_one_game-03.svg"&gt;
        &lt;p&gt;moduł łazienkowy&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>game example:</p>
  
  <p><a href="http://cubichouse.eu/game/" rel="nofollow noreferrer">http://cubichouse.eu/game/</a></p>