Question

我有一个快速代码段，允许我在一行上插入书签，它还告诉我书签从右边缘的百分比。我希望能够拖动这些书签，同时书签上方的文字会更改为适当的百分比。

我有fiddle。

但这是代码：

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

});

我甚至无法拖动图像，我不知道为什么。谁能解释一下？

以下是fiddle。

Answer 1

在将img添加到dom之前，你已经在img上调用了draggable。试试以下..

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



});

Answer 2

$('img').draggable();仅适用于当前存在的图片。

您需要再次手动调用它：

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

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

JQuery draggable无法正常工作

2 个答案: