我试图拖放一个元素。为什么我的代码不能正常工作？

Question

<html>
<head>
<title> test </title>
<script>
var dragObject = null ;
var mouseStartCoords = null ;
var mouseTargetCoords = null ;
var initPosition = null ;

function makeDraggable(item) {
    if(!item){
        return false ;
    }
    item.onmousedown = function(ev) {
        dragObject = this ;
        initPosition = getPosition(item) ;
        if (!initPosition) return false ;
        mouseStartCoords = getMouseCoords(ev) ;
    }
}

function getPosition(e){
    if(!e){
        return false ;
    }
    return {
        x:e.offsetLeft, y:e.offsetTop
    };
}

function getMouseCoords(ev) {
    ev = ev || window.event ;
    return {
        x:ev.clientX, y:ev.clientY
    };
}

function mouseMove(ev) {
    ev = ev || window.event ;
    var target = ev.target || ev.srcElement ;
    mouseTargetCoords = getMouseCoords(ev) ;
    if (dragObject){
        target.style.position = 'absolute' ;
        target.style.top = initPosition.y + mouseTargetCoords.y - mouseStartCoords.y ;
        target.style.left = initPosition.x + mouseTargetCoords.x - mouseStartCoords.x ;     
    }
}


function mouseUp(ev) {
    dragObject = false ;
}


document.onmouseup = mouseUp ;
document.onmousemove = mouseMove ;

window.onload = function() {
    makeDraggable(document.getElementById('dragObj')) ;
}
</script>
</head>
<body>
<img src="1.jpg" id="dragObj" />
</body>
</html>

Answer 1

此行的错误ev = ev || windown.event ; ev = ev || windown.event ; 将其更改为ev = ev || window.event ; ev = ev || window.event ;

在这个改变之后它起作用。 但不顺利，原因

function mouseMove(ev) {
    ev = ev || window.event ;
    var target = ev.target || ev.srcElement ;
    mouseTargetCoords = getMouseCoords(ev) ;
    if (dragObject){
        target.style.position = 'absolute' ;
        target.style.top = initPosition.y + mouseTargetCoords.y - mouseStartCoords.y ;
        target.style.left = initPosition.x + mouseTargetCoords.x - mouseStartCoords.x ;     
    }
}

document.onmousemove = mouseMove ;

这意味着当鼠标没有覆盖图像时（当你快速拖动而脚本可以执行时发生），则event.srcElement将成为你试图获取其位置的文档。

编辑

需要进行以下更改才能正常运行

function makeDraggable(item) {
    if(!item){
        return false ;
    }
    item.onmousedown = function(ev) {
        dragObject = item ;
        initPosition = getPosition(item) ;
        if (!initPosition) return false ;
        mouseStartCoords = getMouseCoords(ev) ;
    }
}

function mouseMove(ev) {
    ev = ev || window.event ;
    var target = ev.target || ev.srcElement ;
    mouseTargetCoords = getMouseCoords(ev) ;
    if (dragObject){
        dragObject.style.position = 'absolute' ;
        dragObject.style.top = initPosition.y + mouseTargetCoords.y - mouseStartCoords.y ;
        dragObject.style.left = initPosition.x + mouseTargetCoords.x - mouseStartCoords.x ;     
    }
}

function mouseUp(ev) {
    dragObject = null ;
}

Answer 2

我的猜测是你可能想要阻止浏览器的默认操作，这样它就不会尝试进行浏览器本机图像拖动。

在onmousedown处理程序中，你可能想要这样的东西：

    ev = ev || window.event ;
    if (ev.preventDefault) {
      ev.preventDefault() ;
    }
    ev.returnValue = false ;
    dragObject = this ;
    initPosition = getPosition(item) ;
    if (!initPosition) return false ;
    mouseStartCoords = getMouseCoords(ev) ;

人们最熟悉与链接相关的默认行为。 对于锚标记，单击链接时浏览器的默认操作是导航到href。 要停止此操作，请使用preventDefault() （或IE的等效项，将returnValue设置为false ）。

浏览器还具有其他活动的默认操作，例如拖动图像。 在拖动图像的情况下，某些浏览器将创建一个可以拖动的半透明鬼影像。

我试图拖放一个元素。为什么我的代码不能正常工作？

问题描述

2 个解决方案

解决方案1
1 2011-07-27 12:21:51

解决方案2
1 2011-07-27 12:34:02

我试图拖放一个元素。 为什么我的代码不能正常工作？

问题描述

2 个解决方案

解决方案1 1 2011-07-27 12:21:51

解决方案2 1 2011-07-27 12:34:02

我试图拖放一个元素。为什么我的代码不能正常工作？

解决方案1
1 2011-07-27 12:21:51

解决方案2
1 2011-07-27 12:34:02