zoukankan
html css js c++ java
另一个行拖动效果
<!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>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文
相关阅读:
Ubuntu命令行快捷启动Matlab
用xmanager6启动Linux上的图形界面程序
Winscp远程连接Linux主机,上传和下载文件
Xshell6连接Ubuntu18.04
Windows10通过VNC远程连接Ubuntu18.04
获取Linux ip
关联Anaconda和最新Pycharm2018.3.2
asp.net mvc 外网获取不到port问题解决
js 毫秒换算成秒
c# 监听文件夹动作
原文地址:https://www.cnblogs.com/rubylouvre/p/2063294.html
最新文章
学习总结(二十二)
学习总结(二十一)
学习总结(二十)
学习总结(十九)
学习总结(十八)
学习总结(十七)
学习总结(十六)
学习总结(十五)
《视觉SLAM十四讲》第2讲 初识SLAM
《视觉SLAM十四讲》第1讲 预备知识
热门文章
《陶哲轩实分析》第19章 勒贝格积分
《陶哲轩实分析》第18章 勒贝格测度
《陶哲轩实分析》第17章 多元微分学
《陶哲轩实分析》第16章 傅里叶级数
《陶哲轩实分析》第15章 幂级数
《陶哲轩实分析》第14章 一致收敛
《陶哲轩实分析》第13章 度量空间上的连续函数
《陶哲轩实分析》第12章 度量空间
windows下用winscp的root连接ubuntu“拒绝访问”的解决方法
用xstart远程连接linux图形用户界面时发生已经在使用的情况
Copyright © 2011-2022 走看看