私は要素をドラッグアンドドロップしようとしました。なぜ私のコードは正しく動作しませんか？このライン上の

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

出典

2011-07-27 absurdism

問題点は何ですか？何が起こり、何が起こりたいですか？詳細情報とhttp://jsfiddle.net/のデモをご提供ください。 –

エラーは、それが動作します。この変更後ev = ev || window.event ;

に変更しev = ev || windown.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は、その位置uが取得しようとしてrをドキュメントになり（uはスクリプトが実行できるよりも速いドラッグしたときに起こります）。

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

出典

2011-07-27 12:21:51 hungryMind

ありがとう、まだそれはまだではない – absurdism

ええ、ありがとう、 'スムーズではない'部分。 – absurdism

私の推測では、あなたはおそらく、それはドラッグブラウザのネイティブイメージをしようとしないように、ブラウザのデフォルトのアクションを阻止したいということです。

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）を使用します。

ブラウザには、イメージをドラッグするなど、他のアクティビティのデフォルトアクションもあります。画像をドラッグする場合、一部のブラウザで半透明のゴースト画像が作成され、ドラッグすることができます。

出典

2011-07-27 12:34:02 jimbojw

ありがとう、私はそれを試してみます – absurdism

あなたはこれを把握しましたか？ – jimbojw

私は要素をドラッグアンドドロップしようとしました。なぜ私のコードは正しく動作しませんか？このライン上の

答えて

関連する問題