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

domに追加する前に、imgでドラッグ可能と呼びました。以下をお試しください。

$(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 に答える