JQuery可拖动不起作用答案

【问题标题】：JQuery draggable not workingJQuery可拖动不起作用
【发布时间】：2013-03-26 16:21:09
【问题描述】：

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

我有一个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。

【问题讨论】：

标签： jquery html css draggable

【解决方案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();
    })



});

【讨论】：

+1 打败我！您需要输入一些代码以使标签在拖动时跟随，但这是另一个问题。 ;)
你不需要使用$('img').draggable()，你可以简单地使用img.draggable();，因为这已经是一个jQuery对象了。
不错！当它允许我时，我会奖励答案。如何使它只在“X”方向（水平）拖动？

【解决方案2】：

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

需要手动再次调用：

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

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

【讨论】：