图像拖动不起作用

Posted 2023-05-08

【中文标题】图像拖动不起作用

【英文标题】：Image drag not working

【发布时间】：2015-08-07 11:41:48

【问题描述】：

我知道我可以用 jQuery 来做，但我只想用 javascript 做，这样我可以提高我的技能，但我不能让它工作......我想让我的图像可拖动......我知道我可以用 $('img').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/

【问题讨论】：

Drag and drop without JQuery UI的可能重复

@dsg，嗨，感谢您查看我的问题，但这根本不是重复的。我想知道如何编写代码，我脑子里有所有的逻辑，但它不起作用。明白了吗？

【参考方案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。