拖放，继承CSS属性，并创建一个克隆帮手

我试图做一个多维数据集游戏，并有几个问题。我似乎无法让前面的街区掩盖后面的街区。有没有一种方法可以从多维数据集所在的对象上继承z-index css属性？拖放，继承CSS属性，并创建一个克隆帮手

另一个问题是我不能使帮手：克隆，函数工作在我的情况。克隆不会捕捉到网格并返回到它的位置。

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/

来源

2017-09-13 Tad

创建以下测试：https://jsfiddle.net/Twisty/4nj4fqkk/到目前为止，我没有看到您尝试过的。基本上，在你的“drop”函数中，你可以设置或传递你想要的'z-index'属性到被删除的项目。 – Twisty

https://jsfiddle.net/4nj4fqkk/1/ 但是每一行都必须有不同的z-index？ – Tad

他们可以，如果你想要他们。他们当然不需要。目前还不清楚这个问题对我来说是什么，因为在拖动它们之后拖动的项目出现在网格上方。 – Twisty

对于这一点，我会先劝分离您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设置为更高的值，以使其显示在其他元素的上方。将项目从“后排”移动到前面，具有传递“更近”元素的效果。简单的CSS做：

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

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

希望有所帮助。

来源

2017-09-13 17:24:30 Twisty

拖放，继承CSS属性，并创建一个克隆帮手

回答

相关问题