程序员人生 网站导航

JavaScript 实现在网页上进行拖拽效果

栏目：jscript时间：2014-04-16 14:17:18

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

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

网页上实现拖拽其实也不是很复杂.第一你需要知道鼠标坐标，第二你


提示：可修改后代码再运行!

获取鼠标移动信息

第一我们需要获取鼠标的坐标．我们加一个用户函数到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
};
}


提示：可修改后代码再运行!

------分隔线----------------------------

上一篇 倒计时抢购JS代码，结束有提示已结束

下一篇 JavaScript for…in 循环的陷阱

------分隔线----------------------------

最新技术推荐

1深入浅出Fetch API 带你入解应用场景及适用问题 2网页禁止复制内容的方法 3JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题 4js如何立即退出函数 5javascript事件：获取事件对象getEvent函数 6Firefox下frameset取不到值的解决方法 7JavaScript数组实例：点击逐条读取文字