Я пытался перетащить элемент. Почему мой код не работает должным образом? - PullRequest
Новая
       0

Я пытался перетащить элемент. Почему мой код не работает должным образом?

0 голосов
/ 27 июля 2011 
<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>

Ответы [ 2 ]

1 голос
/ 27 июля 2011

Я предполагаю, что вы, вероятно, хотите запретить действие браузера по умолчанию, чтобы он не пытался перетаскивать собственное изображение браузера.

Внутри обработчика 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).

Браузеры также имеют действия по умолчанию для других действий, таких как перетаскивание изображений.В случае перетаскивания изображения некоторые браузеры создают полупрозрачное изображение-призрак, которое можно перетаскивать.

1 голос
/ 27 июля 2011

ошибка в этой строке 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 становится документом, положение которого вы пытаетесь получить.

EDIT

Следующие изменения необходимы для правильной работы 

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 ;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...