javascript之鼠标拖动位置互换效果代码

更新时间：2007年11月24日 11:59:24 作者：

鼠标拖动，位置互换效果，主要用于div，提高用户体验等方面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <style type="text/css"> div.box{ position:relative; padding:5px; background-color:#000; width:300px; height:300px; overflow:hidden; } div.box div.item{ float:left; width:90px; height:90px; background-color:#ccc; margin:5px; position:relative; cursor:pointer; } div.mask{     width:90px;     height:90px;     background-color:#f00;     opacity:0.8;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);     position:absolute;     visibility:hidden;     top:20px;     left:20px;     z-index:10; } </style> <script type="text/javascript"> var darg = {     target : null,     ox : 0,     oy : 0 }; var box = document.createElement("div"); box.className = "box"; var mask = document.createElement("div"); mask.className = "mask"; box.appendChild(mask); for(var i = 0; i < 9; i ++){     var item = document.createElement("div");     item.className = "item";     item.appendChild(document.createTextNode(i + 1));     item.onmousedown = function(){         var e = arguments[0] || window.event;         var o = e.target || e.srcElement;         darg.target = o;         mask.style["top"] = o.offsetTop + "px";         mask.style["left"] = o.offsetLeft + "px";         mask.style["visibility"] = "visible";         darg.ox = e.clientX - mask.offsetLeft;         darg.oy = e.clientY - mask.offsetTop;     }     box.appendChild(item); } document.body.appendChild(box); function getItem(x,y){     x = x - box.offsetLeft;     y = y - box.offsetTop;     var o = box.childNodes[(3 - parseInt((box.offsetWidth - x)/100) + (2 - parseInt((box.offsetHeight - y)/100)) * 3)];     var n = darg.target.nextSibling;     var on = o.nextSibling;     box.insertBefore(o,n);     box.insertBefore(darg.target,on); } document.onmousemove = function(){     if(darg.target != null && darg.target.nodeType == 1){         var e = arguments[0] || window.event;         mask.style["left"] = e.clientX - darg.ox + "px";         mask.style["top"] = e.clientY - darg.oy + "px";     } } box.onmouseup = function(){     if(darg.target != null && darg.target.nodeType == 1){         var e = arguments[0] || window.event;         var o = e.target || e.srcElement;         getItem(e.clientX,e.clientY);         darg.target = null;     } } document.onmouseup = function(){     darg.target = null;     mask.style["visibility"] = "hidden"; } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript中的float运算精度实例分析
javascript中的float运算精度的一些问题，下面是具体的说明。
2010-08-08
JavaScript 最佳实践：帮你提升代码质量
在本篇教程中，我将指出一些重要的 JavaScript 最佳实践，让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧
2016-12-12
JS实现清除指定cookies的方法
这篇文章主要介绍了JS实现清除指定cookies的方法,在web程序设计中非常实用,需要的朋友可以参考下
2014-09-09
JavaScript 绘制饼图的示例
这篇文章主要介绍了JavaScript 绘制饼图的示例，帮助大家更好的利用JavaScript绘制图表，感兴趣的朋友可以了解下
2021-02-02
JavaScript中数据结构与算法(三)：链表
这篇文章主要介绍了JavaScript中数据结构与算法(三)：链表,本文分别讲解了单链表与双链表以及增加节和删除节的代码实例,需要的朋友可以参考下
2015-06-06
浅谈typescript中keyof与typeof操作符用法
本文主要介绍了typescript中keyof与typeof操作符用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
原生JS实现萤火虫效果
这篇文章主要为大家详细介绍了原生JS实现萤火虫效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
pdfh5.js的使用方法以及解决遇到的坑
这篇文章主要给大家介绍了关于pdfh5.js的使用方法以及解决遇到的坑的解决办法,pdfh5.js基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件,需要的朋友可以参考下
2024-02-02
JavaScript判断对象、数组是否包含某个属性、某个值的方法
这篇文章主要给大家介绍了关于JavaScript判断对象、数组是否包含某个属性、某个值的相关资料,我们在实际的开发过程中,经常需要判断对象/数组是否包含某个属性或者某个值,需要的朋友可以参考下
2023-09-09
js css样式操作代码（批量操作）
用js控制css样式，能让网页达到良好的的用户体验甚至是动画的效果。并且考虑到效率。
2009-10-10

javascript之鼠标拖动位置互换效果代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具