2

I am using jQuery draggable to drag separate letters of the word "Hello" across the screen, but I've noticed annoying behavior.

If I drag the letter H to the right, anywhere near the letters E, L, L, or O, and then drop the letter, I can no longer "pick-up" the letter because it is now "trapped under" the other letters' h1 (I wrapped each letter in a separate h1). The same goes for any other letter that is considered to be "below" the other (H being the "lowest" and O being the "highest").

It's difficult to explain so I'm including a fiddle to illustrate. Drag the letter "H" right above the letter "E" (not on top of), let go, then try to pick it back up again and you won't be able to (until you move the "E" out of the way). I put a border around each h1 so that you could see that it is the h1 that is somehow blocking me from picking up the letter.

The weird thing is that this only happens in Chrome. I've tested it in IE10 on Win 7 and it's fine.

Any ideas on how to fix it?

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/

4

2 回答 2

0

@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();
});

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

于 2013-08-15T01:07:30.157 回答
0

使用该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/

于 2013-08-13T22:08:10.290 回答