首页登陆欢迎您!
首页登陆 > 运维知识 > JS相关思维导图

JS相关思维导图

时间:2019-12-06

本文实例讲述了javascript实现行拖动的方法。分享给大家供大家参考。具体如下:

javascript DOM操作

javascript变量
javascript运算符
javascript数组
javascript流程语句
javascript字符串函数
javascript函数基础
javascript基础DOM操作
文档对象模型DOM
javascript正则表达式

行拖动 window.onload = function(){ //绑定事件 var addEvent = document.addEventListener ? function{ el.addEventListener; } : function{ el.attachEvent( "on" + type, callback ); } //判定对样式的支持 var getStyleName= { var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-']; var reg_cap = /-/g; function getStyleName { el = el || document.documentElement; var style = el.style,test; for (var i=0, l=prefixes.length; i < l; i++) { test = .replace(reg_cap,function{ return $1.toUpperCase; if{ return test; } } return null; } return getStyleName; })(); var userSelect = getStyleName; //精确获取样式 var getStyle = document.defaultView ? function{ return document.defaultView.getComputedStyle.getPropertyValue } : function{ style = style.replace/g, function{ return $1.toUpperCase; return el.currentStyle[style]; } var dragManager = { y:0, dragStart:function{ e = e || event; var handler = e.target || e.srcElement; if(handler.nodeName === "TD"){ handler = handler.parentNode; dragManager.handler = handler; if(!handler.getAttribute{ handler.setAttribute("data-background",getStyle(handler,"background-color")) } //显示为可移动的状态 handler.style.backgroundColor = "#ccc"; handler.style.cursor = "move"; dragManager.y = e.clientY; if(typeof userSelect === "string"){ return document.documentElement.style[userSelect] = "none"; } document.unselectable = "on"; document.onselectstart = function(){ return false; } } }, draging:function{//mousemove时拖动行 var handler = dragManager.handler; if{ e = e || event; var y = e.clientY; var down = y > dragManager.y;//是否向下移动 var tr = document.elementFromPoint; if(tr && tr.nodeName == "TD"){ tr = tr.parentNode dragManager.y = y; if{ tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr)); } }; } }, dragEnd:function(){ var handler = dragManager.handler if  { handler.style.backgroundColor = handler.getAttribute; handler.style.cursor = "default"; dragManager.handler = null; } if(typeof userSelect === "string"){ return document.documentElement.style[userSelect] = "text"; } document.unselectable = "off"; document.onselectstart = null; }, main:function{ addEvent(el,"mousedown",dragManager.dragStart); addEvent(document,"mousemove",dragManager.draging); addEvent(document,"mouseup",dragManager.dragEnd); } } var el = document.getElementById; dragManager.main; }.table{width:60%;border: 1px solid red;border-collapse: collapse;}.table td{border: 1px solid red;height: 20px;}行拖动

图片 1

以上就是对javascript的9大学习步骤。

1 One dom.require
2 Two ControlJS
3 Three HeadJS
4 Four LAB.js
5 Five $script.js
6 Six NBL.js

javascript DOM操作

图片 2

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

javascript windows对象

javascript变量.jpg

图片 3

图片 4

javascript windows对象

javascript运算符.png

javascript变量

图片 5

图片 6

javascript数组.jpg

javascript变量

图片 7

javascript函数基础

javascript流程语句.jpg

上一篇:OC常用方法 下一篇:没有了