拖拽，继承css属性，创建克隆助手

Question

我尝试制作一个方块游戏，但遇到了一些问题。我似乎无法让前面的街区掩盖后面的街区。有没有办法可以从放置立方体的对象继承 z-index css 属性？

另一个问题是我无法使 helper: clone, 函数在我的情况下工作。克隆体不会与网格对齐，只是 returns 到它的位置。

css:

/*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;
 }

javascript、jQueryUI、javasript 和 html:

<script type="text/javascript">

$( 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"
  } );
}

</script>
<div id="gameFull">
<div class="drop_zone">
  <div class="drop_block_1 makeMeDroppable1"></div>
  <div class="drop_block_2 makeMeDroppable1"></div><div class="drop_block_3 makeMeDroppable1"></div>
  <div class="drop_block_4 makeMeDroppable1"></div><div class="drop_block_5 makeMeDroppable1"></div><div class="drop_block_6 makeMeDroppable1"></div>
  <div class="drop_block_7 makeMeDroppable1"></div><div class="drop_block_8 makeMeDroppable1"></div><div class="drop_block_9 makeMeDroppable1"></div><div class="drop_block_10 makeMeDroppable1"></div>
  <div class="drop_block_11 makeMeDroppable1"></div><div class="drop_block_12 makeMeDroppable1"></div><div class="drop_block_13 makeMeDroppable1"></div>
  <div class="drop_block_14 makeMeDroppable1"></div><div class="drop_block_15 makeMeDroppable1"></div>
  <div class="drop_block_16 makeMeDroppable1"></div>

</div>

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

游戏示例：

http://cubichouse.eu/game/

Answer 1

为此，我首先建议您将 class 和 id 属性分开。这将使 CSS 中的内容更加明确，并使您的代码更易于分配。

这是我的建议：

HTML

<div id="gameFull">
  <div class="drop_zone">
    <div class="drop_block" id="block_1" data-row="1"></div>
    <div class="drop_block" id="block_2" data-row="2"></div>
    <div class="drop_block" id="block_3" data-row="2"></div>
    <div class="drop_block" id="block_4" data-row="3"></div>
    <div class="drop_block" id="block_5" data-row="3"></div>
    <div class="drop_block" id="block_6" data-row="3"></div>
    <div class="drop_block" id="block_7" data-row="4"></div>
    <div class="drop_block" id="block_8" data-row="4"></div>
    <div class="drop_block" id="block_9" data-row="4"></div>
    <div class="drop_block" id="block_10" data-row="4"></div>
    <div class="drop_block" id="block_11" data-row="5"></div>
    <div class="drop_block" id="block_12" data-row="5"></div>
    <div class="drop_block" id="block_13" data-row="5"></div>
    <div class="drop_block" id="block_14" data-row="6"></div>
    <div class="drop_block" id="block_15" data-row="6"></div>
    <div class="drop_block" id="block_16" data-row="7"></div>
  </div>
  <div class="cubic_one_game">
    <div>
      <img id="cube_1" class="singleCube" src="http://cubichouse.eu/wp-content/themes/cubic/img/cube_one_game-01.svg">
      <p>moduł kuchenny</p>
    </div>
    <div>
      <img id="cube_2" class="singleCube" src="http://cubichouse.eu/wp-content/themes/cubic/img/cube_one_game-02.svg">
      <p>moduł sypialniany</p>
    </div>
    <div>
      <img id="cube_3" class="singleCube" src="http://cubichouse.eu/wp-content/themes/cubic/img/cube_one_game-03.svg">
      <p>moduł łazienkowy</p>
    </div>
  </div>
</div>

CSS

/*gameResources*/

.drop_zone {
  height: 350px;
  width: 650px;
  background-image: url("http://cubichouse.eu/wp-content/themes/cubic/img/one_game.svg");
  margin: 0 auto;
  position: relative;
}

.drop_zone .drop_block {
  height: 55px;
  width: 108px;
  // background-color: red;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 999;
}

#block_1 {
  top: 50px;
  left: 325px;
}

#block_2 {
  top: 90px;
  left: 255px;
}

#block_3 {
  top: 90px;
  left: 395px;
}

#block_4 {
  top: 130px;
  left: 185px;
}

#block_5 {
  top: 130px;
  left: 325px;
}

#block_6 {
  top: 130px;
  left: 465px;
}

#block_7 {
  top: 175px;
  left: 115px;
}

#block_8 {
  top: 175px;
  left: 255px;
}

#block_9 {
  top: 175px;
  left: 395px;
}

#block_10 {
  top: 175px;
  left: 535px;
}

#block_11 {
  top: 215px;
  left: 185px;
}

#block_12 {
  top: 215px;
  left: 325px;
}

#block_13 {
  top: 215px;
  left: 465px;
}

#block_14 {
  top: 255px;
  left: 255px;
}

#block_15 {
  top: 255px;
  left: 395px;
}

#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;
  z-index: 1000;
}

.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;
}

.cubic_one_game img {
  height: 346px;
}

JavaScript

$(function() {
  $(".drop_block").droppable({
    accept: ".singleCube",
    drop: function(e, ui) {
      var $this = $(this);
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 200, "linear");
        }
      });
      ui.draggable.css({
        "z-index": 1000 + $(this).data("row")
      });
    }
  });

  $('.singleCube').draggable({
    containment: '#gameFull',
    cursor: 'move',
    revert: "invalid"
  });
});

乍一看似乎有点工作量，但在某些情况下这是一种非常有用的做法。现在我们可以根据需要轻松管理多个项目或单个项目。

对于透视效果，离用户最近的元素应该是最高的z-index。我为每个 drop_box 添加了 data-row 属性以便于管理。当一个项目被放下时，它会根据它的行分配一个新的 z-index。这确保了正确的视角。

您可能需要考虑在拖动某个项目时，将其 z-index 强制设置为更高的值，以便它显示在其他元素之上。将项目从 "back" 行向前移动，具有在 "closer" 元素后面传递的效果。 CSS:

操作简单

.singleCube.ui-draggable-dragging {
  z-index: 2000;
}

工作示例：https://jsfiddle.net/Twisty/4nj4fqkk/3/

希望对您有所帮助。

拖拽，继承css属性，创建克隆助手

Drag and drop, inheriting css property, and creating a clone helper

drag-and-drop

jquery-ui

z-index