CODEWITHSUNDEEP
jqueryhtmlcssdraggable
bagofmilk
bagofmilk

Reputation: 1550

JQuery draggable not working

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

<div id='wrapper'>
   <div id="container"></div>
</div>

CSS

#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%;}

JQuery

$(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();

});

I can't even drag the image and I don't know why. Can anyone explain?

Here's the fiddle again.

.

Upvotes: 0

Views: 1236

Answers (2)

Laurent Perrin
Laurent Perrin

Reputation: 14881

$('img').draggable(); only applies to currently existing images.

You need to manually call it again:

$('#container').click(function(e) {
  ...

  $(img).draggable();
});

Upvotes: 1

Dave Lawrence
Dave Lawrence

Reputation: 3929

You have called draggable on the img before adding it to the dom. Try below..

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



});

Upvotes: 3

Related Questions