0

我有一个快速片段，可以让我在一行上插入一个书签，它还告诉我书签位于右边缘的百分比。我希望能够拖动这些书签，同时书签上方的文本正在更改为适当的百分比。

我有一个小提琴。

但这里的代码：

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

});

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

小提琴又来了。

.

4

2 回答 2

3

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



});
于 2013-03-26T16:25:36.000 回答
1

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

您需要再次手动调用它：

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

  $(img).draggable();
});
于 2013-03-26T16:27:42.067 回答