runxinzhi.com
首页
百度搜索
另一个行拖动效果
<!doctype html> <html> <head> <title>行拖动 by 司徒正美</title> <script> //防止拖动时内容被选中 var getStyleName= (function(){ var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-']; var reg_cap = /-([a-z])/g; function getStyleName(css, el) { el = el || document.documentElement; var style = el.style,test; for (var i=0, l=prefixes.length; i < l; i++) { test = (prefixes[i] + css).replace(reg_cap,function($0,$1){ return $1.toUpperCase(); }); if(test in style){ return test; } } return null; } return getStyleName; })(); function log(s){ window.console && window.console.log(s); } var userSelect = getStyleName("user-select"); function onUnselect(){ if(typeof userSelect === "string"){ return document.documentElement.style[userSelect] = "none"; } document.unselectable = "on"; document.selectstart = function(){ return false; } }; function offUnselect(){ if(typeof userSelect === "string"){ return document.documentElement.style[userSelect] = "text"; } document.unselectable = "off"; document.selectstart = null; }; //事件绑定 var addEvent = document.addEventListener ? function(el,type,callback){ el.addEventListener( type, callback, false ); } : function(el,type,callback){ el.attachEvent( "on" + type, callback ); } window.onload = function(){ var dataTransfer =document.createElement("table"), draging = false, tr1; dataTransfer.id = "dataTransfer"; var style = dataTransfer.style document.body.appendChild(dataTransfer); var table = document.getElementById("target"); addEvent(table,"mousedown",function(e){ e = e || event; var target = e.target || e.srcElement; if(target.tagName === "TD"){ tr1 = target.parentNode; dataTransfer.rowIndex = tr1.rowIndex; dataTransfer.appendChild(tr1); style.display = ""; style.position = "absolute"; style.left = (e.clientX+20)+"px"; style.top = (e.clientY+10)+"px"; draging = true; onUnselect(); } }); addEvent(table,"mousemove",function(e){ if(draging){ style.left = (e.clientX+20)+"px"; style.top = (e.clientY+10)+"px"; } }); addEvent(document,"mouseup",function(e){ if(draging){ var td = document.elementFromPoint(e.pageX, e.pageY); if(td.tagName == "TD"){ var tr2 = td.parentNode; tr2.parentNode.insertBefore(tr1,tr2.nextSibling); log("移动位置") }else{ log("还原位置"); log( dataTransfer.rowIndex) var tr2 = table.rows[ dataTransfer.rowIndex ]; tr2.parentNode.insertBefore(tr1,tr2); } style.display = "none"; style.position = ""; draging = false; offUnselect(); } }); } </script> <style> .blue_table { border: 1px solid #4d6366; border-collapse: collapse; 90%; background:#B0E0E6; } .blue_table td ,.blue_table thead th{ border: 1px solid #4d6366; } .blue_table thead th{ background: #8080c0; color:#fff; font-weight: normal; } #dataTransfer { background: #36daff; opacity:0.85; background: -webkit-gradient(linear, left top, right top, from(#36daff), to(#fff)); background: -moz-linear-gradient(left, #36daff, #fff); background:-o-linear-gradient(left, #36daff, #fff); box-shadow:10px 10px 5px #444; -moz-box-shadow:10px 10px 5px #444; -webkit-box-shadow:10px 10px 5px #444; } </style> </head> <body> <table class="blue_table" id="target"> <thead> <tr> <th>事件名称 </th><th>触发机制</th><th>绑定节点</th><th>相应兼容事件</th><th>常见操作 </th> </tr> </thead> <tbody> <tr> <td> ondragstart </td> <td> 当鼠标左键点击某个可拖动节点开始拖拽时。 </td> <td> 拖动节点 </td> <td> onmousedown, ondraggesture </td> <td> 对 DataTransfer 的数据进行初始化。初始化一些资源。 </td> </tr> <tr> <td> ondrag </td> <td> 当拖拽进行时,在拖拽结束之前,在 dragstart 之后。 </td> <td> 拖动节点 </td> <td> onmousemove </td> <td> 对拖动节点的位置信息进行处理。 </td> </tr> <tr> <td> ondragenter </td> <td> 拖动节点进入放置容器时。 </td> <td> 放置容器 </td> <td> onmouseenter </td> <td> 对放置容器的样式进行修改。 </td> </tr> <tr> <td> ondragover </td> <td> 拖动节点在放置容器上方时。 </td> <td> 放置容器 </td> <td> onmouseover </td> <td> 判断拖动的节点是否被放置容器接受。 </td> </tr> <tr> <td> ondragleave </td> <td> 拖动节点离开放置容器上方时。 </td> <td> 放置容器 </td> <td> ondragexit </td> <td> 对放置容器的样式进行修改。 </td> </tr> <tr> <td> ondrop </td> <td> 拖动节点在放置容器上方松开鼠标左键时。 </td> <td> 放置容器 </td> <td> ondragdrop </td> <td> 对 DataTransfer 的数据进行处理。对 DOM 节点进行操作。 </td> </tr> <tr> <td> ondragend </td> <td> 松开鼠标左键时,如 drop 事件触发,则在 drop 事件之后。 </td> <td> 拖动节点 </td> <td> onmouseup </td> <td> 释放在 dragstart 中创建的资源。 </td> </tr> </tbody> </table> </body> </html>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
相关阅读:
【MySQL】JSON相关
【Scala】01 基础了解
【Windows】更改Win10字体和Cmd字体
【DataBase】MySQL根据父节点查询下面的所有子节点
【Windows】Win10 20H2版本 管理员身份问题
【Java】树状节点结构的数据
【Vue】接口模块化处理
【Server
【Binary】XShell6 无法使用的解决办法
【Java】逻辑错误BUG
原文地址:https://www.cnblogs.com/rubylouvre/p/2063294.html
最新文章
requirements.txt的创建及使用
adb常用命令
python破解b站验证码实现登陆
ActionChains用法
python破解b站验证码实现登陆
webdriver中的等待——主要讲解WebDriverWait()
vip视频解析接口
python爬取qq音乐歌曲
python爬取网易云歌曲
POJ-1275 Cashier Employment
热门文章
AtCoder Beginner Contest 203 A-E
第22次csp认证回顾
新手赛总结
汇编语言程序——十六进制输出程序中标识符的内存地址
C语言——文件的打包与解包
汇编语言程序——用A逆时针画矩形
luoguP1991-无线通讯网
AtCoder Beginner Contest 193
AtCoder Beginner Contest 192
【Scala】02 循环
Copyright © 2020-2023
润新知