当前位置: 首页 > 编程笔记 >

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

羊舌昆杰
2023-03-14
本文向大家介绍JS实现网站菜单拖拽移位效果的方法,包括了JS实现网站菜单拖拽移位效果的方法的使用技巧和注意事项,需要的朋友参考一下

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-web-menu-tzyw-style-codes/

具体代码如下:

<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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍JS HTML5实现拖拽移动列表效果,包括了JS HTML5实现拖拽移动列表效果的使用技巧和注意事项,需要的朋友参考一下 练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JS HTML5拖拽上传图片预览 HTML5拖拽移动列表实现思路:  1.循环设置每个子项的draggable属性,以及设置拖动标记(不会多个或全部子项都移动)  2.每次进入投放区,则检测时候有拖放标记,

  • 本文向大家介绍JS实现盒子拖拽效果,包括了JS实现盒子拖拽效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现盒子拖拽效果的具体代码,供大家参考,具体内容如下 效果: html代码: css代码: js代码: 关于事件的用法,官方用到了object.addEventListener("dragover", myScript)和event.target.id 以上就是本文的全部

  • 本文向大家介绍原生JS实现拖拽效果,包括了原生JS实现拖拽效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 想要让整个元素移动需要三个事件: 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html JS CSS部分 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多

  • 本文向大家介绍js实现小窗口拖拽效果,包括了js实现小窗口拖拽效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js css3实现图片拖拽效果,包括了js css3实现图片拖拽效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍原生js实现拖拽移动与缩放效果,包括了原生js实现拖拽移动与缩放效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码,供大家参考,具体内容如下 效果图如下-实现了简单的拖拽和缩放功能 第一步—简单的拖拽功能 效果如下,简单的拖拽 第二步—简单的缩放功能 1.设置方位 2.给原型绑定缩放的方法 效果图如下 最终效果,盒子可以拖动,可以缩