如何使用纯javascript在屏幕上平滑拖动图像

我正在尝试使用JavaScript在屏幕上拖动图像。我已经编写了一个脚本，它可以很好地处理带有文本的div，但是当我在图像上使用它时，它会断断续续地工作

我已经将我的代码放在JSFIDLE上，以便其他人能够理解我的意思。

如果您运行它，您会发现文本块可以拖放，但是当您尝试对图像执行相同操作时，它会将图像留在后面。这就像图像跟不上鼠标的移动一样

我在JSFIDLE上重复了以下代码：

功能启动图（e）{
//确定事件对象
如果（！e）{
var e=window.event；
}
//IE使用src元素，其他使用target
var targ=e.target？e.target:e.src元素；
if（target.className！=“dragme”）{
返回
};
//计算事件X，Y坐标
offsetX=e.clientX；
offsetY=e.clientY；
//为顶部和左侧属性指定默认值
如果（！target.style.left）{
target.style.left='0px'
};
如果（！target.style.top）{
target.style.top='0px'
};
//计算顶部和左侧的整数值
//性质
coordX=parseInt（target.style.left）；
coordY=parseInt（target.style.top）；
阻力=真；
//移动div元素
document.onmousemove=dragDiv；
}
函数dragDiv（e）{
如果（！拖动）{
返回
};
如果（！e）{
var e=window.event
};
var targ=e.target？e.target:e.src元素；
//移动div元素
target.style.left=coordX+e.clientX-offsetX+'px'；
target.style.top=coordY+e.clientY-offsetY+px'；
返回false；
}
函数stopDrag（）{
阻力=假；
}
window.onload=函数（）{
document.onmousedown=startDrag；
document.onmouseup=停止拖动；
}

.dragme{
位置：相对位置；
宽度：270px；
高度：203px；
光标：移动；
}
#拖拉的{
背景色：#ccc；
边框：1px实心#000；
}

“你好，世界！”

只需在

startDrag

函数末尾添加

return false

，即可防止浏览器处理点击事件。

您可以添加

e.preventDefault（）startDrag

功能的末尾，code>也应仅在

startDrag

和

global

上分配

target

（无var）：

功能启动图（e）{
//确定事件对象
如果（！e）{
var e=window.event；
}
如果（e.preventDefault）e.preventDefault（）；
//IE使用src元素，其他使用target
target=e.target？e.target:e.src元素；
if（target.className！='dragme'）{return}；
//计算事件X，Y坐标
offsetX=e.clientX；
offsetY=e.clientY；
//为顶部和左侧属性指定默认值
如果（！target.style.left）{target.style.left='0px'}；
如果（！target.style.top）{target.style.top='0px'}；
//计算顶部和左侧的整数值
//性质
coordX=parseInt（target.style.left）；
coordY=parseInt（target.style.top）；
阻力=真；
//移动div元素
document.onmousemove=dragDiv；
返回false；
}
函数dragDiv（e）{
如果（！drag）{return}；
如果（！e）{var e=window.event}；
//var targ=e.target？e.target:e.src元素；
//移动div元素
target.style.left=coordX+e.clientX-offsetX+'px'；
target.style.top=coordY+e.clientY-offsetY+'px'；
返回false；
}
函数stopDrag（）{
阻力=假；
}
window.onload=函数（）{
document.onmousedown=startDrag；
document.onmouseup=停止拖动；
}

绑定拖动事件的特定元素

function log() {
    var debug = true;
    if (!debug)
        return;
    if (arguments) {
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
}    

function Drag(element) {
    this.dragging = false;
    this.mouseDownPositionX = 0;
    this.mouseDownPositionY = 0;
    this.elementOriginalLeft = 0;
    this.elementOriginalTop = 0;
    var ref = this;
    this.startDrag = function (e) {
        e.preventDefault();
        ref.dragging = true;
        ref.mouseDownPositionX = e.clientX;
        ref.mouseDownPositionY = e.clientY;
        ref.elementOriginalLeft = parseInt(element.style.left);
        ref.elementOriginalTop = parseInt(element.style.top);
        // set mousemove event
        window.addEventListener('mousemove', ref.dragElement);
        log('startDrag');
    };
    this.unsetMouseMove = function () {
        // unset mousemove event
        window.removeEventListener('mousemove', ref.dragElement);
    };
    this.stopDrag = function (e) {
        e.preventDefault();
        ref.dragging = false;
        ref.unsetMouseMove();
        log('stopDrag');
    };
    this.dragElement = function (e) {
        log('dragging');
        if (!ref.dragging)
            return;
        e.preventDefault();
        // move element
        element.style.left = ref.elementOriginalLeft + (e.clientX - ref.mouseDownPositionX) + 'px';
        element.style.top = ref.elementOriginalTop + (e.clientY - ref.mouseDownPositionY) + 'px';
        log('dragElement');
    };
    element.onmousedown = this.startDrag;
    element.onmouseup = this.stopDrag;
}

var myDrag = new Drag(yourElement);// bind event
console.log(myDrag.dragging);

函数日志（）{
var debug=true；
如果（！调试）
返回；
如果（参数）{
for（var i=0；i

+1用于尝试纯javascript解决方案。现在，我们只需要等待“使用jquery”群体的加入：）。为什么不直接使用jquery呢？很好！只是在小提琴上试了一下，效果完美无瑕。我正在考虑把它变成一个简单的基于浏览器的Javascript国际象棋游戏：）@Parrotmaster（除了

returnfalse

function log() {
    var debug = true;
    if (!debug)
        return;
    if (arguments) {
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
}    

function Drag(element) {
    this.dragging = false;
    this.mouseDownPositionX = 0;
    this.mouseDownPositionY = 0;
    this.elementOriginalLeft = 0;
    this.elementOriginalTop = 0;
    var ref = this;
    this.startDrag = function (e) {
        e.preventDefault();
        ref.dragging = true;
        ref.mouseDownPositionX = e.clientX;
        ref.mouseDownPositionY = e.clientY;
        ref.elementOriginalLeft = parseInt(element.style.left);
        ref.elementOriginalTop = parseInt(element.style.top);
        // set mousemove event
        window.addEventListener('mousemove', ref.dragElement);
        log('startDrag');
    };
    this.unsetMouseMove = function () {
        // unset mousemove event
        window.removeEventListener('mousemove', ref.dragElement);
    };
    this.stopDrag = function (e) {
        e.preventDefault();
        ref.dragging = false;
        ref.unsetMouseMove();
        log('stopDrag');
    };
    this.dragElement = function (e) {
        log('dragging');
        if (!ref.dragging)
            return;
        e.preventDefault();
        // move element
        element.style.left = ref.elementOriginalLeft + (e.clientX - ref.mouseDownPositionX) + 'px';
        element.style.top = ref.elementOriginalTop + (e.clientY - ref.mouseDownPositionY) + 'px';
        log('dragElement');
    };
    element.onmousedown = this.startDrag;
    element.onmouseup = this.stopDrag;
}

var myDrag = new Drag(yourElement);// bind event
console.log(myDrag.dragging);