随笔 - 42  文章 - 71  trackbacks - 0
<2008年4月>
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

常用链接

留言簿

随笔档案

文章分类

文章档案

搜索

  •  

最新评论

阅读排行榜

评论排行榜

最近在搞VML的东东。做了一个简单的在HTML页面上画出流程图的功能。

既然是画图,就肯定遇到在页面上拖动图画元素的功能。这个大家都会觉得很简单了,无非就是mousedown, mousemove, mouseup这些事件的组合了。但是如果只是这么简单的编写代码的话,当页面上元素都有自己的mousedown, mousemove, mouseup时,在拖动的时候就会受到干扰。根据原来开发VB程序的经验,我觉得应该有一种方式能够将事件暂时锁定到一个对象。翻翻资料,看到了两个方法:setCapture和releaseCapture,哈哈,和Win32 API的函数名称都一样。setCapture函数的作用就是将后续的mouse事件都发送给这个对象,releaseCapture就是将鼠标事件还回去,由document、window、object之类的自行来处理,这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰。另外,还有一个很重要的事情是,在Win32上,mouse move的事件不是一个连续的,也就是说,并不是我们每次移动1px的鼠标指针,就会发生一个mousemove,windows会周期性检查mouse的位置变化来产生mousemove的事件。所以,如果是一个很小的页面对象,比如一个直径5px的圆点,如果没有setCapture和releaseCapture,那么在鼠标按住之后,快速的移动鼠标,就有可能鼠标移动走了,但是小圆点还在原地,就是因为下一次的mousemove事件已经不再发给这个圆点对象了。

 

简单的代码如下(WindowsXP SP2 + IE 6 测试):

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>HTML Mouse Drag Move</title>
  <script language="javascript">
    // 全局变量,记录鼠标指针的上一次位置
    var g_x;
    var g_y;
    function mymousedown(theObj) {
      if (event.button == 1) {
        g_x = event.clientX;
        g_y = event.clientY;
        theObj.style.cursor = "move";
        //锁定鼠标事件
        theObj.setCapture();
      }
      return true;
    }
    function mymousemove(theObj) {
      if (event.button == 1) {
        //计算鼠标指针的移动量
        var deltaX = event.clientX - g_x;
        var deltaY = event.clientY - g_y;
        g_x = event.clientX;
        g_y = event.clientY;
        theObj.style.pixelLeft += deltaX;
        theObj.style.pixelTop += deltaY;
      }
      return true;
    }
    function mymouseup(theObj) {
      if (event.button == 1) {
        //放开鼠标事件
        theObj.releaseCapture();
        theObj.style.cursor="default";
      }
      return true;
    }
    //在写JavaScript代码时,我通常加入一个文本区域来进行调试
    function debugInfo(info) {
      var debugWindow = document.getElementById("debug_window");
      debugWindow.value = debugWindow.value + "\r\n" + info;
   }
  </script>
  </head>
  <body>
    <div id="div1" style="border:1px solid black; position:absolute; top:10; left:10; width:100; height:100; background:red"
         onmousedown="mymousedown(this)"
         onmousemove="mymousemove(this)"
         onmouseup="mymouseup(this)">
         Hello world!
    </div>
    <br><br><br><br><br><br>
    <textarea id="debug_window" name="textarea" cols="50" rows="20"></textarea>
  </body>
</html>

注:要移动的对象的style中position属性一定要指定为absolute或者relative,因为position属性默认是static,在这种情况下,对象的left和top属性会被CSS解释器忽略。

另外,在网上看到有同仁说:

Mozilla 也有类似的功能,方法稍微不同 
  window.captureEvents(Event.eventType) 
   window.releaseEvents(Event.eventType)
Event 是Mozilla特殊的一个object. 
eventType 包括: Abort, Blur, Click, Change, DblClick, DragDrop, Error, Focus, KeyDown, KeyPress, KeyUp, Load, MouseDown

如果要在Mozilla中兼容,就需要进行不同的处理了。

posted on 2008-04-16 15:32 YODA 阅读(3786) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: