zoukankan      html  css  js  c++  java
  • 用javascript进行拖拽1(转)

    本文译自:http://www.webreference.com/programming/javascript/mk/column2/index.html
    转自:
    http://www.blueidea.com/tech/web/2006/3791.asp
    所有版权归原文所有

    Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作图片轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽.

    有很多理由让你的网站加入拖拽功能,最简单的一个是数据重组.例如:你有一个序列的内容让用户排序,用户需要给每个条目进行输入或者用select选择,替代前面这个方法的就是拖拽.或许你的网站也需要一个用户可以拖动的导航窗口!那么这些效果都是很简单:因为你可以很容易的实现!

    网页上实现拖拽其实也不是很复杂.第一你需要知道鼠标坐标,第二你需要知道用户鼠标点击一个网页元素并实现拖拽,最后我们要实现移动这个元素.

    运行代码框

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

    获取鼠标移动信息

    第一我们需要获取鼠标的坐标.我们加一个用户函数到document.onmousemove就可以了:

    document.onmousemove = mouseMove;

    function mouseMove(ev){
     ev           = ev || window.event;
     var mousePos = mouseCoords(ev);
    }

    function mouseCoords(ev){
     if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
     }
     return {
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y:ev.clientY + document.body.scrollTop  - document.body.clientTop
     };
    }

    运行代码框

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

  • 相关阅读:
    第三周:Filter 拦截用户请求部分代码分析
    Story Of Web Background
    XML的前景
    XML的工作原理和过程
    第二周:XML的定义和用途
    企业级应用与互联网应用的区别
    第一周:JavaEE——课程目标
    Java 容器小结
    使用java显示所有操作系统环境变量
    迭代器和Interator的常见用法
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/650508.html
Copyright © 2011-2022 走看看