halfbakedj14
New Member
I have a quick snippet that allows me to insert a bookmark on a line and it also tells me at what percentage the bookmark is located from the right edge. I want to be able to drag these bookmarks while at the same time the text above the bookmark is changing to the appropriate percentage.I have a fiddle. But here's the code:HTML\[code\]<div id='wrapper'> <div id="container"></div></div>\[/code\]CSS\[code\]#wrapper { width:500px; height:100px; margin:40px 0px; border:1px solid white;}#container { background: green; width: 500px; height: 20px; position: relative; margin-top:40px;}#wrapper img { position: absolute; }span{font-size:62.5%;}\[/code\]JQuery\[code\]$(document).ready(function() {$("#container").click(function(e) { e.preventDefault(); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var z = x - 5; var txt = $('<span></span>'); txt.css('top', '50px').css('left', z).css('position', 'absolute'); txt.text( (Math.round((x.toFixed(0) / 5) * 1) / 1) + "%"); txt.appendTo('#wrapper'); var img = $('<img>'); img.css('top', '65px').css('left', x).css('position', 'absolute').css('z-index', '999'); img.attr('src', 'http://www.appmalt.info/htmlplay/img/arrowup.png'); img.appendTo('#wrapper');})$('img').draggable();});\[/code\]I can't even drag the image and I don't know why. Can anyone explain?Here's the fiddle again..