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 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
用js实现放大镜效果
Oct 28 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
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PDO::errorCode讲解
2019/01/28 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
django解决跨域请求的问题
2018/11/11 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
python re.match()用法相关示例
2021/01/27 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
本科毕业生自荐信
2014/05/26 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2015年信息中心工作总结
2015/05/25 职场文书