Question

我正在使用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/

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

Answer 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>

NEW JQUERY：

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

NEW FIDDLE： http://jsfiddle.net/8Huu7/45/

jQuery可拖动的奇怪行为

2 个答案: