Question

谁能告诉我怎么做？

我刚开始学习javascript。我使用jquery draggable创建了一个拖放游戏：http://www.vwardv.com/doll8.html

现在我需要对其进行改进，以便用户可以：

使用按钮将项目向前（超过其他项目）
使用按钮将项目发回（在其他项目后面）

为了使其有效工作，还需要指示当前选择哪个层（例如边界框或其他内容）。

非常感谢您提供的任何帮助。我把下面的代码放在你需要的地方。

谢谢

<!doctype html>
<html lang="en">
<head>
 <script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    $( ".mydraggable" ).draggable();
});
</script>
</head>
<body>
<div id="items">
<img src="bodies/palepd.gif">
<img src="bodies/trousers.gif" class="mydraggable">
<img src="bodies/top.gif" class="mydraggable">
<img src="bodies/dress.gif" class="mydraggable">
<img src="bodies/coat.gif" class="mydraggable">
</div>
</body>

更新

感谢您的帮助。

好吧，所以（因为我是一个完全的初学者）我做的第一件事就是阅读引用的链接，然后逐行研究和理解代码。这是我对代码的作用的理解：

单击img变量时，声明maxZindex并将其赋值为0.

然后迭代所有图像以找到任何图像具有的最高z-index。迭代如下：

声明变量z并为其分配与正在迭代的图像的z-index相同的值。
如果值z不是数字，则给出值0（这是为了防止错误吗？）
如果z的值大于var maxZindex，则maxZindex将被赋值为z。

然后为点击的图像指定maxZindex + 1的值。

此代码将所选图像置于所有图像的顶部。但是，如果你只是想把它提高一层呢？如果你只想在按下名为#upbutton的图像时发生这种情况怎么办？我想代码将是：

一些可以“选择”图像的代码，显示一个边界框 - 仅在单击另一个图像时取消选择。我一直在做研究，但我不知道该怎么做。

然后编码，在鼠标点击upbotton时，将所选图像的z-index增加1。这是我的尝试：

 $("#upbutton").click(function() {
    var z = parseInt($(*Selected image*).css('z-index'));
   $(*Selected image*).css('z-index', z+1);
   });

我甚至在这里模糊地走上正轨吗？

我已尝试使用提供的代码，但我显然已将其错误地输入到现有代码中。任何人都可以建议我做错了什么（下面的代码）？

谢谢

<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script>

$(document).ready(function() {
    $( ".mydraggable" ).draggable();
});

$("img").click(function() {

// find the z-index of the top-most item
var maxZindex = 0;
$("img").each(function() {
    var z = parseInt($(this).css('z-index'));
    if(isNaN(z)) z = 0;
    if(z > maxZindex) maxZindex = z;
});

//assign a z-index greater than the current max to the clicked item
$(this).css('z-index', maxZindex+1);

});

</script>
</head>
<body>
<div id="items">
<img src="bodies/palepd.gif">
<img src="bodies/trousers.gif" class="mydraggable">
<img src="bodies/top.gif" class="mydraggable">
<img src="bodies/dress.gif" class="mydraggable">
<img src="bodies/coat.gif" class="mydraggable">
</div>
</body>

Answer 1

<强>更新

将点击的项目向下移动一级的代码将类似于：

它主要涉及：

获取z-index低于所选项目
获得z-index最高的元素（让我们称之为targetElem）z-index低于所选项目的
使用targetElem

你可以颠倒逻辑，提升一级。

希望它有所帮助。

// selected item
var div = $('.selected');

// get selected item's z-index into myZ
var myZ = parseInt(div.css('z-index'));
if(isNaN(myZ)) myZ = 0;

// get all elements with a z-index that myZ
var lowerZElements = [];
$('.z').each(function() {
    var z = parseInt($(this).css('z-index'));  
    if(!isNaN(z) && z < myZ) lowerZElements.push(this);
});

// get the element with the highest z-index among the 
// ones with lower z-index than myZ
var targetZ = 0;
var targetElem = null;
for(var i=0; i<lowerZElements.length; i++) {
    var z = parseInt($(this).css('z-index'));  
    if(z > targetZ) {
        targetZ = z;
        targetElem = this;
    }
}

// swap the z-indices with targetElem
$(this).css('z-index', targetZ);
$(targetElem).css('z-index', myZ);

假设您想要点击该项目：

$('img').click(function() {

    // find the z-index of the top-most item
    var maxZindex = 0;
    $('img').each(function() {
        var z = parseInt($(this).css('z-index'));
        if(isNaN(z)) z = 0;
        if(z > maxZindex) maxZindex = z;
    });

    // assign a z-index greater than the current max to the clicked item
    $(this).css('z-index', maxZindex+1);

});

Answer 2

看看css z-index property

并使用jquery to modify it

在jquery draggable中提前/发送后退选项？

2 个答案: