我正在使用 jQuery draggable 在屏幕上拖动单词“Hello”的单独字母，但我注意到了烦人的行为。
如果我将字母 H 向右拖动到字母 E、L、L 或 O 附近的任何位置，然后放下字母，我将无法再“拾起”字母，因为它现在“被困在下面” "其他字母的 h1(我将每个字母包装在一个单独的 h1 中)。这同样适用于被认为“低于”另一个字母的任何其他字母(H 是“最低”，O 是“最高”)。
这很难解释，所以我用 fiddle 来说明。将字母“H”拖到字母“E”的正上方(不是在上面)，放手，然后尝试再次将其拾起，但您将无法(直到将“E”移出方式)。我在每个 h1 周围都加上了边框，这样您就可以看到是 h1 以某种方式阻止我拿起这封信。
奇怪的是，这只发生在 Chrome 中。我已经在 Win 7 的 IE10 中测试过了，没问题。
关于如何修复它有什么想法吗？
HTML:
<body>
<div id="name">
<h1 id="h" ><a href=#>H</a></h1>
<h1 id="e" ><a href=#>E</a></h1>
<h1 id="l" ><a href=#>L</a></h1>
<h1 id="l2" ><a href=#>L</a></h1>
<h1 id="o" ><a href=#>O</a></h1>
</div>
</body>
CSS:
body {
font-family: 'Sigmar One', cursive;
font-size: 75px;
color: white;
text-shadow: 5px 5px 5px #000;
background-color:blue;
width: 100%;
height: 100%;
margin: 0;
}
div {
position:absolute;
height:100%;
width: 100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
height: 1em;
border: 1px solid black;
}
a {
/*border: 1px solid black;*/
display: inline-block;
line-height: 100%;
overflow: hidden;
}
a:visited, a:hover, a:active {
text-decoration: none;
color: white;
}
a:link {
text-decoration: none;
color: white;
text-shadow: 3px -3px 0px black;
}
a:hover {
text-shadow: 5px 5px 5px #000;
color: white;
}
jQuery:
$(document).ready(function() {
$("#h, #e, #l, #l2, #o").draggable({ handle: "a" });
});
fiddle : http://jsfiddle.net/8Huu7/36/
最佳答案
使用 z-index 属性。
这是代码:
$(document).ready(function() {
$("#h, #e, #l, #l2, #o").draggable({
handle: "a",
start: function(){
$('#name h1').css('z-index', 99);
$(this).css('z-index', 999);
}
});
});
这是 fiddle : http://jsfiddle.net/8Huu7/41/
关于jQuery 可拖动的奇怪行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18219893/