怎么用javascript进行拖拽


本文译自:http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版权归原文所有

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

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

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



[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

获取鼠标移动信息

第一我们需要获取鼠标的坐标.我们加一个用户函数到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 全选 注:如需引入外部Js需刷新才能执行]



相关阅读:
CSS 群组化选择符
JSP提供解析接口的XML数据
不直接替换系统调用的kld
JavaScript 语言精粹学习笔记
CSS基础教程 关于网页图片的属性
CSS网页布局入门教程6:左列固定,右列宽度自适应
IE和Firefox浏览器CSS网页布局不同点
JQuery获取文本框中字符长度的代码
Asp.net Mvc Codeplex Preview 5 第二篇 Controller&Filter的新特性
Javascript 事件捕获的备忘(setCapture,captureEvents)
linux服务器如何防范ssh尝试攻击
php代码优化及php相关问题总结
ASP.NET数据库操作层的设计
Win XP家用版也能装IIS
快速导航

Copyright © 2016 phpStudy |