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

时间：2017-09-13 06:25:44

标签： jquery-ui drag-and-drop z-index

我试图制作一个立方体游戏，并有几个问题。我似乎无法让前面的街区遮住后面的那些。有没有办法可以从多维数据集被删除的对象继承z-index css属性？

另一个问题是我不能让 helper：clone，函数在我的情况下工作。克隆不会捕捉到网格，只返回它的位置。

的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/

1 个答案:

答案 0 :(得分：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。我为每个data-row添加了drop_box属性，以便于管理。删除某个项目后，会根据该行为其分配一个新的z-index。这确保了正确的观点。

您可能需要考虑拖动项目时，强制它z-index更高的值，以使其显示在其他元素上方。将项目从“后退”行向前移动，具有传递“更接近”元素的效果。在CSS中很简单：

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

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

希望有所帮助。

相关问题
最新问题