jQuery可拖动的奇怪行为答案

【问题标题】：jQuery draggable weird behaviorjQuery可拖动的奇怪行为
【发布时间】：2013-08-13 21:55:13
【问题描述】：

我正在使用 jQuery draggable 在屏幕上拖动单词“Hello”的单独字母，但我注意到了令人讨厌的行为。

如果我将字母 H 向右拖动到字母 E、L、L 或 O 附近的任意位置，然后放下该字母，我将无法再“捡起”该字母，因为它现在“被困在" 其他字母的 h1（我将每个字母包装在单独的 h1 中）。任何其他被认为“低于”另一个的字母也是如此（H 是“最低”，O 是“最高”）。

这很难解释，所以我包括一个小提琴来说明。将字母“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" });
    });

小提琴： http://jsfiddle.net/8Huu7/36/

【问题讨论】：

你为什么要把h1弄得这么大？你不能让h1 和字母一样大，这样就可以避免这个问题吗？您可以使用margin 代替间距。
我在做 display: table-cell 和 vertical-align: middle，这就是它们看起来这么大的原因。如果我可以将文本放在页面中间，我会考虑其他选项。
你说它在 IE10 中工作，但是它有同样的问题，只是颠倒了。由于您将 x 字母放在 y 字母上，因此您只能拖动 x 字母。两者之一必须在顶部，它们不能存在于同一个 z-index 上。如果您同时将鼠标悬停在 H 和 E 上，您可以拖动哪一个？
@KevinB 不在我的版本中。无论在 IE10 中如何，我都可以拖动两个字母。
它在 IE10 中也适用于我。

标签： jquery html css draggable

【解决方案1】：

使用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);
            }
        });
    });

这是小提琴： http://jsfiddle.net/8Huu7/41/

【讨论】：

嘿，谢谢。我试过你的小提琴，它表现出同样的行为。
是的，但是现在如果你把H 放在E 上，你就不能抓住E。这不是他想要的。
没错。它类似于stack，它将最新的对象拖到顶部。但这不是我想要的。
我更新了小提琴。当您尝试时，我不小心将attr 设置为css。再次点击小提琴。
@YuraSokolov 我前后都试过了。不幸的是，当前的行不通，因为现在我不能拖动“E”。一个字母不应与另一个字母重叠。

【解决方案2】：

@EveryoneWhoSaidItCouldn'tBeDone

我找到了解决方案，老实说，这是一个简单的改变。我不敢相信我以前没有想到它（并且想知道为什么没有其他人建议它......）。

基本上，我将 ID 分配给 <a> 标签而不是 <h1> 标签。因为<a> 标签现在是可拖动元素，所以jQuery 中不再需要a 句柄。

（虽然，我不确定为链接元素分配 ID 是否符合犹太教规……从来没有这样做过……）

就是这样！

新的 HTML：

<body>
  <div id="name">
    <h1><a id="h" href=#>H</a></h1>
    <h1><a id="e" href=#>E</a></h1>
    <h1><a id="l" href=#>L</a></h1>
    <h1><a id="l2" href=#>L</a></h1>
    <h1><a id="o" href=#>O</a></h1>
  </div>
</body>

新的 JQUERY：

$(document).ready(function() {
        $("#h, #e, #l, #l2, #o").draggable();
});

新的 FIDDLE： http://jsfiddle.net/8Huu7/45/

【讨论】：

为什么不把所有的链接都赋予同一个类，并将事件处理程序分配给类...jsfiddle
@War10ck 好点。我想我只是假设通过分配相同的类，整个单词会一起移动，而不是每个单独的字母。所以我从来没有尝试过......