Currently, I am experimenting with jQuery draggable to move individual letters of the word "Hello" around on the page. However, I have come across a frustrating issue.
When I drag the letter H towards the right and it gets near the letters E, L, L, or O, dropping the letter causes it to get stuck underneath the other letters (each wrapped in its own h1 tag). The same problem occurs for any letter that is positioned lower than another (with H being the lowest and O being the highest).
To better explain this peculiar behavior, I have created a fiddle demonstration link. Try dragging the letter "H" just above the letter "E" (not directly onto it), release it, and then try picking it back up - you'll see that it's trapped under the "E". I added borders around each h1 element to visualize how the h1 seems to block the dragging functionality.
The interesting thing is that this issue only arises in Chrome. In my tests using IE10 on Windows 7, everything works smoothly.
If you have any suggestions on resolving this issue, your input would be greatly appreciated.
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/