交互式网页设计与JavaScript编程技巧分享-优快云博客

本文链接：https://blog.youkuaiyun.com/error250/article/details/12852227

不知道大家有没有上过周博通这个网站 my.potu.com/
上面的面板可以自由拖拽和隐藏关闭很酷的效果不过都是模仿国外的哈
最近看了很多这种类似的站点比如MS的http://www.start.com/
发现有一个趋势就是用户自定义的东西越来越多并且越来越高级
就是所谓的web2.0吧不过话又说回来在中国要想推行这样的风潮可能还要过段时间
因为中国大多数网民的文化层次还不到这个水平
闲话不多说了给大家介绍一下我写的这个程序看了效果以后模仿的不过还是有很多bug哈比起那些站点来差太远了仅给大家提供一点点参考说得不对的地方大家多多指正哦

首先介绍一下这个程序的一些相关事件和方法：

event.button：事件发生时表示鼠标的动作如果为1则是鼠标左键 2为鼠标右键不过现在好像MS都已经有8个值了难道以后鼠标的发展方向是8个键？

parentNode：父节点

event.ClientX：事件发生时的鼠标x值

event.ClientY：事件发生时的鼠标Y值

setCapture()方法：建立对象和鼠标之间的通讯也就是说鼠标作用在此对象上时才跟踪鼠标

releaseCapture()方法：切断对象和鼠标之间的通讯

JavaScript程序如下：

<script>

var move=false; 



function StartDrag(obj)  //定义准备拖拽的函数

{

        if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")//判断事件发生地点 防止 效拖拽

        {

                obj.setCapture();                    //对当前对象的  动作进行跟踪

                obj.style.background="#999"; //改变颜色

                move=true;

                }       

}



function Drag(obj)        //定义拖拽函数

{

        if(move)

        {

                var oldwin=obj.parentNode;        //定义父对象

                oldwin.style.left=event.clientX-50;//定义父对象目前位置

                oldwin.style.top=event.clientY-10;

        }

        

        }



function StopDrag(obj)   //定义停止拖拽函数

{

                obj.style.background="#000";   //改变颜色

                obj.releaseCapture();                //停止对当前对象的  跟踪

                move=false;

                }       



</script>

查看效果：

function Drag(obj)
{
if(move)
{
  var oldwin=obj.parentNode;
  oldwin.style.left=event.clientX-50;
  oldwin.style.top=event.clientY-10;
}

}

function StopDrag(obj)
{
  obj.style.background="#000";
  obj.releaseCapture();
  move=false;
  }

</script>

<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
This is a moveable window.<br>
Moreinfo in www.achome.cn .
</div>

</body>
</HTML>

体验新版博客