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验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
浅析java线程中断的办法
Jul 29 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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
用session做客户验证时的注意事项
2006/10/09 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
jQuery 操作XML入门
2008/12/25 Javascript
Js 中debug方式
2010/02/07 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
基于python实现把图片转换成素描
2019/11/13 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
如何通过python实现全排列
2020/02/11 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
运动会演讲稿300字
2014/08/25 职场文书
上班离岗检讨书
2014/09/10 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
JavaScript 原型与原型链详情
2021/11/02 Javascript
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android