1

HTMLのドラッグアンドドロップに関するすべてのチュートリアルでは、要素自体ではなくドキュメントにonmousedownイベントとonmouseupイベントが設定されているように見えます。以下のコードでテストしたところ、要素をクリックすると、onmousedownイベントとonmouseupイベントの両方がトリガーされます。ただし、要素をドラッグして別の場所にドロップしようとしても、onmouseupイベントは発生しません。

私は以下のコードを使用します、私の質問は：なぜドラッグしたときにonmouseupが起動されないのですか？Firefox8.0.1を使用しています

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Border</title>

<style type="text/css">
body{
background-color: gray;
}

#page{
margin: 20px auto;
width:800px;
height:639px;
/*background-image: url("./img/board.jpg");*/
background-image: url("https://www.google.com/logos/2012/dickens-2012-HP.jpg");
background-repeat:  no-repeat;

}

#target{
position: relative;
top: 10px;
left: 20px;
/*background-image: url("./img/target.jpg");*/
background-image: url("https://www.google.com/images/icons/product/chrome-48.png");
background-repeat:  no-repeat;
width: 145px;
height:117px;

}

</style>

<script type="text/javascript">

function mylog(msg)
{
    if(window.console && console.log){
        console.log(msg);
    }
}



window.onload = function(){ 
    initdragdrop();

}

/* 
todo: learn how to make a getObject()
function getObject(id){
    var t = document.getElementById(id);

    this.x = t.left;
    this.y = t.top;
}
 */

function initdragdrop(){    
    var t = document.getElementById('target');


    t.onmousedown = function(){

        this.status = 'down';
        mylog(this.status);

    }


    t.onmouseup = function(){
        this.status = 'up';

        mylog(this.status);
    }

}

</script>

</head>
<body>

<div id="page">


<div id="target">

</div>

</div>


</body>
</html>
4

1 に答える 1

1

内でマウスを上下に動かすと、うまくいくようですtarget。ここに、コードを含む「jsfiddle」と、ターゲットの周りの黒い境界線があります：http: //jsfiddle.net/prsYk/

ただし、マウスを下に移動してターゲットの領域の外にマウスを「ドラッグ」してから上に移動すると、イベントは発生しません。これは、マウスを上に向けたときにマウスがターゲットの領域にないという事実と関係があると思います。

このフィドル： http： //jsfiddle.net/V4HPw/documentは、イベントをオブジェクトにアタッチしたときに両方のイベントが引き続き発生することを示しています。現在、tターゲットにアタッチしています。これは、黒い境界線のある要素です。

マウスを動かすと要素の位置が変わる実際のドラッグを実装する場合、onmouseupまだターゲットの領域内にいるため、離すとイベントが発生するはずです。

ただし、車輪の再発明を行う代わりに、Javascriptライブラリを使用すると、実際のドラッグ/ドロップ機能を実装する手間を省くことができるかもしれません。

上記のライブラリはどちらも、DOM要素を操作するための便利なメソッドを提供します。また、「要素の取得」について学ぶための「todo」ノートに気付いたので、さらに多くのことができます。

お役に立てば幸いです。

于 2012-02-08T03:18:36.583 に答える