javascript鼠标拖拽的那些事情

<html>

<head>

<title>javascript鼠标拖拽的那些事情</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<script type="text/javascript"><!--

       var dragging = false;

       var test;

       var mouseY;

       var mouseX;

       //初始化

       window.onload = function(){

        test = document.getElementById("test");

        //绑定拖拽元素

        test.onmousedown = down;

        //鼠标在元素内按下触发down事件

        test.onmousemove = move;

        //鼠标在元素内移动触发move事件

        document.onmouseup = up;

        //鼠标松开触发up事件

        test.style.position = "relative";

        test.style.top = "0px";

        test.style.left = "0px";

        //定义css

       }

       function down(event)

       {

        event = event || window.event;

        dragging = true;

        mouseX = parseInt(event.clientX);

        mouseY = parseInt(event.clientY);

        objY = parseInt(test.style.top);

        objX = parseInt(test.style.left);

       }

       function move(event){

        event = event || window.event;

        if(dragging == true){

            var x,y;

            y = event.clientY - mouseY + objY;

            x = event.clientX - mouseX + objX;

            test.style.top = y + "px";

            test.style.left = x + "px";

        }

       }

       function up(){

        dragging = false;

       }

       // -->

       </script>

<div id="test" style="border:1px solid ccc; color:#fff; width:200px; background:#000; padding:10px;">

  <p>一点点白</p>

</div>

</body>

</html>
巴特西

javascript鼠标拖拽的那些事情

最新文章

热门文章
