图像拖动不起作用

Question

我知道我可以用jQuery制作它，但我想用JavaScript做它只能这样我可以提高我的技能，但我无法使它工作......我想让我的图像可拖动..我知道我可以使用$（＆＃39; img＆＃39;）。draggable（）;使用jQuery，我想要做的就是提高我的JS技能，我试着看看jquery ui的来源，但我无法理解它。有人能帮助我吗？我有这个逻辑：

* I know i need to start the drag function when i click the img
 * I know i need to move the img in the x-y positions of the body
 * I know how to get the position while passing the mouse over the body

但是我无法使图像可以拖动。这是我所拥有的一个例子：

var img = document.querySelector("#img-teste");

img.onmousedown = function(){
    img.onmousemove = function(e){
        var x = e.clientX;
        var y = e.clientY;

        img.style.left = x+'px';
        img.style.top = y +'px';
    }
}
img.onmouseup = function(){
    img.onmousemove = null;
}

http://jsfiddle.net/r4sj5218/

Answer 1

  

我无法使图像可拖动

你很亲密。

img.style.left = x+'px';
img.style.top = y+'px';

要使用left或top样式，元素必须为position:absolute，position:relative或position:fixed。

示例：

#img-teste{
    position:absolute;
    width:15%;
    height:15%;
}

对于使用纯JS平滑拖动图像的另一个实现，请参阅here。