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 || 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 个答案: