I have tried to drag and drop an element. Why won't my code work properly?_问答_开发者

I have tried to drag and drop an element. Why won't my code work properly?

开发者 https://www.devze.com 2023-03-23 10:53 出处：网络

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

<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 ;
 开发者_如何学C       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>

My guess is that you probably want to prevent the browser's default action so that it doesn't try to do browser native image dragging.

Inside the onmousedown handler, you probably want something like this:

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

People are most familiar with default behaviors as they relate to links. For an anchor tag, the browser's default action when the link is clicked is to navigate to the href. To stop this, you use preventDefault() (or IE's equivalent, setting returnValue to false).

Browsers also have default actions for other activities, such as dragging images around. In the case of dragging an image, some browsers will create a semi-opaque ghost image that you can drag around.

error on this line ev = ev || windown.event ; change it to ev = ev || window.event ;

after this change it works. But not smoothly, reason

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 ;

Which means when mouse is not over image (happens when u drag fast than script can execute) then event.srcElement becomes document whose position u r trying to get.

EDIT

Following changes needed to run properly

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 ;
}