你的位置:首页 > Java教程

[Java教程]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>