源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

怎么用javascript进行拖拽第1/2页

  • 时间:2020-11-30 02:48 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:怎么用javascript进行拖拽第1/2页
[b]本文译自:[/b][url=http://www.webreference.com/programming/javascript/mk/column2/index.html]http://www.webreference.com/programming/javascript/mk/column2/index.html[/url] 所有版权归原文所有 Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作图片轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽. 有很多理由让你的网站加入拖拽功能,最简单的一个是数据重组.例如:你有一个序列的内容让用户排序,用户需要给每个条目进行输入或者用select选择,替代前面这个方法的就是拖拽.或许你的网站也需要一个用户可以拖动的导航窗口!那么这些效果都是很简单:因为你可以很容易的实现! 网页上实现拖拽其实也不是很复杂.第一你需要知道鼠标坐标,第二你需要知道用户鼠标点击一个网页元素并实现拖拽,最后我们要实现移动这个元素.
[Ctrl+A 全选 注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
[b]获取鼠标移动信息[/b] 第一我们需要获取鼠标的坐标.我们加一个用户函数到document.onmousemove就可以了:

[u]复制代码[/u] 代码如下:
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  }; }

  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部