加载中…
个人资料
糖炒栗子
糖炒栗子
  • 博客等级:
  • 博客积分:0
  • 博客访问:32,496
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

利用JS可以抑动的块

(2010-04-07 10:42:08)
标签:

杂谈

分类: JS学习班
现在俺详细描述下这个过程:
a) 鼠标按下时,判断鼠标的位置。将鼠标坐标和元素坐标的差存在元素的 startX 和 startY 两个自定义的属性里。绑定鼠标移动事件。
b) 鼠标移动时,判断鼠标的位置。将鼠标坐标和 startX / startY 的差值作为新的元素坐标。(你问我为啥这样算?帅哥请回去重修高中数学,呵呵)
c) 鼠标按键抬起,清除鼠标移动事件的相应。(不然你放开了鼠标方块还是跟着你跑)
注:
为啥用 document 的事件绑定而不是把事件绑定在 div上面?问的好(你不会没想到这个问题吧?...)如果你试着将事件绑定在div上,你会发现随着鼠标的快速移动,很容易把div给甩掉(不理解的同 学请自己去动动手)。

不定义 position="absolute" 的话,left 和 top 是无效的 - 方块不会动的说


<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown(arguments[0]);"></div>
<script>
function divBlock_event_mousedown(e){
    var e, obj, temp;
  obj=document.getElementByIdx("divBlock");
  e=window.event?window.event:e;
  obj.startX=e.clientX-obj.offsetLeft;
  obj.startY=e.clientY-obj.offsetTop;
 
  document.onmousemove=document_event_mousemove;
  temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}
function document_event_mousemove(e){
  var e, obj;
  obj=document.getElementByIdx("divBlock");
  e=window.event?window.event:e;
 
  with(obj.style){
      position="absolute";
      left=e.clientX-obj.startX+"px";
      top=e.clientY-obj.startY+"px";
  }
}
function document_event_mouseup(e){
    var temp;
    document.onmousemove="";
    temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
</script>

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有