JS实现网站菜单拖拽移位效果的方法


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS实现网站菜单拖拽移位效果的方法。分享给大家供大家参考。具体如下:

这是一个基于JavaScript的层手动实例,让网站的菜单可以拖拽移位,记得土豆网的“豆单”有这种功能。本效果还尚未彻底完成,部分地方因没有写入对应内容,因此JS可能会提示有错误。

运行效果截图如下:

JS实现网站菜单拖拽移位效果的方法

在线演示地址如下:

具体代码如下:

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>层拖动</title>
<style type="text/css">
*{ margin:0; padding:0}
li{ list-style:none}
.wapper{ width:500px; margin:50px;height:auto; overflow:hidden; position:relative; border:1px #e6e6e6 solid}
.wapper ol{ position:absolute;top:0; left:0}
.wapper li{width:30px; height:32px; line-height:32px; padding:3px 0; text-align:center;}
.wapper .m-li{ padding:3px 3px 3px 30px;height:32px;position:relative}
.wapper .m-li div,.wapper .m-li-cur div{ line-height:30px; height:30px;background:#ECF3F9; border:1px #ccc solid; padding:0 0 0 16px;color:#316DA9; font-size:14px;cursor:move;}
.wapper .m-li .m-sub-cur,.wapper .m-li-cur .m-sub-cur{opacity:0.35;filter:Alpha(opacity=35);}
.wapper .m-li-cur{ padding:0 3px 3px 30px; border-top:3px #FFDAAD solid}
.wapper .m-li-cur span{ padding:0 0 3px;}
#tips{ position:absolute; top:0;left:0;cursor:move; z-index:2;display:none}
#tips div{background:#FDFFDA;line-height:30px; height:30px;border:1px #ccc solid; padding:0 0 0 16px;color:#316DA9; font-size:14px;}
</style>
</head>
<body>
<div class="wapper" id="box">
<div class="m-wapper">
<div class="m-li"><div class="m-sub">ASP源码</div></div>
<div class="m-li"><div class="m-sub">PHP源码</div></div>
<div class="m-li"><div class="m-sub">JSP源码</div></div>
<div class="m-li"><div class="m-sub">JAVA源码</div></div>
</div>
<ol id="m-num"></ol>
<div id="tips"></div>
</div>
<script type="text/javascript">
document.getElementsByClassName=function(eleClassName){
 var getEleClass = [];
 var myclass = new RegExp("\\b"+eleClassName+"\\b");
 var elem = this.getElementsByTagName("*");
 for(var h=0;h<elem.length;h++){
  var classes = elem[h].className;
  if (myclass.test(classes)) getEleClass.push(elem[h]);
 }
 return getEleClass;
}
function $(o){
 var t = document.getElementById(o);
 return t?t:false;
}
function hasClass(ele,cls) {
 return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
 if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
 if (hasClass(ele,cls)) {
   var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
 ele.className=ele.className.replace(reg,' ');
 }
}
function getStyle(o,n){
 return o.currentStyle?o.currentStyle[n]:(document.defaultView.getComputedStyle(o,"").getPropertyValue(n))
}
function f(){
 var d=document;
 var mNum = document.getElementById("m-num");
 var ols = document.getElementsByClassName("m-wapper")[0];
 var lis = document.getElementsByClassName("m-li");
 var divs = document.getElementsByClassName("m-sub");
 var tips = document.getElementById("tips");
 for(var i=0;i<divs.length;i++){
  var mnumNode=document.createElement("li");
  mNum.appendChild(mnumNode);
  mNum.getElementsByTagName("li")[i].innerHTML=i+1;
  divs[i].onmouseover=function(e){
   show(this);
  }
 }
 function show(obj){
  for(var i=0;i<divs.length;i++){
   if(divs[i]==obj){
    var voidNum=i;
    obj.onmousedown=function(e){
     var cloneNode=obj.cloneNode(true);/*克隆节点*/
     tips.appendChild(cloneNode);
     //alert(i)
     tips.style.width=obj.offsetWidth+"px";
     tips.style.display="block";
     //alert(voidNum);
     tips.style.top=(38*voidNum)+3+"px";
     tips.style.left="30px"
     for(var j=0;j<divs.length;j++){ /*恢复行默认样式*/
      divs[j].className="m-sub";
     }
     obj.className="m-sub-cur"; /*选中行添加新样式*/
     tips.onmouseover=function(e){
      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();//清除选择
      e=e||event;  /*鼠标定位*/
      var x=e.clientY-tips.offsetTop;
      //var y=e.clientX-obj.offsetLeft;
      d.onmousemove=function(e){
       e=e||event;
       var tipsTop = e.clientY-x;
       tips.style.top=tipsTop+"px";
       if(tipsTop <= 3){
        tips.style.top="3px";
       }
       if(tipsTop >= (38*(i-1)+3)){
        tips.style.top=38*(i-1)+3+"px";
       }
       lisNum = Math.round((tipsTop-3)/38);
       if(lisNum>=i){
         lisNum=i;
        }
       for(var n=0; n<divs.length; n++){
        lis[n]["className"]="m-li";
        lis[lisNum]["className"]="m-li-cur";
       }
       //obj.style.left=e.clientX-y+"px";
      }
      d.onmouseup = function(){ 
       d.onmouseup=d.onmousemove="";
       tips.style.display="none";
       for(var n=0; n<lis.length; n++){
        lis[n]["className"]="m-li";
       }
       obj.className="m-sub";
       var newNode=document.createElement("div");
       var delNode=tips.getElementsByTagName("div")[0];/*清空节点*/
       var delNode2=lis[voidNum];/*清空节点*/
       newNode.appendChild(delNode);
       newNode.className="m-li";
       ols.insertBefore(newNode,lis[lisNum]);
       ols.removeChild(delNode2);
       tips.removeChild(delNode);
      }
     }
    }
   }
  }
 }
}
f();
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JS中操作JSON总结
Dec 06 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 #Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 #Javascript
直接拿来用的15个jQuery代码片段
Sep 23 #Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 #Javascript
jQuery Validate验证框架经典大全
Sep 23 #Javascript
Javascript实现的简单右键菜单类
Sep 23 #Javascript
js实现无限级树形导航列表效果代码
Sep 23 #Javascript
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
jquery radio 操作代码
2011/03/16 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Keras实现DenseNet结构操作
2020/07/06 Python
中标通知书格式
2015/04/17 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
MySQL开启事务的方式
2021/06/26 MySQL
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Python实现抖音热搜定时爬取功能
2022/03/16 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL