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>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文
相关阅读:
js 点击列表li,获得当前li的id
PHP松散比较与严格比较的区别详解
电赛总结(二)——AD芯片总结之AD7705
C++Premer Plus学习(五)——函数探幽
FPGA学习
AD7715
电赛初探(二)——语音采集回放系统
MATLAB信号与系统分析(五)——连续时间信号的频谱分析
MATLAB信号与系统分析(四)——离散信号与系统的复频域分析及MATLAB实现
MATLAB信号与系统分析(三)——连续信号与系统的复频域分析及MATLAB实现
原文地址:https://www.cnblogs.com/rubylouvre/p/2063294.html
最新文章
su: user tomcat does not exist
分布式缓存技术redis学习系列(三)——redis高级应用(主从、事务与锁、持久化)
[osg]osgcallback各种回调使用的例子介绍
[osg]OSG使用更新回调来更改模型
[粒子特效]osg的自带粒子系统osgParticle::ParticleSystem
OpenGL遮挡查询
深度排序与alpha混合
c语言的左移和右移
[原]关于phycis集成到osgearth的(瞎写写)
[html]webpack网页开发打包工具
热门文章
Xcode集成POD教程
PDB文件:每个开发人员都必须知道的
ps 快捷键大全
zblog模板怎么安装?zblog主题安装教程
zblog上传安装主题插件不成功的原因和解决办法
zblog文件大小超出,上传成功但插入不了
PHP判断是否在微信内部浏览器访问
smarty使用小技巧——截取小技巧
mysql 查询当天、本周,本月,上一个月的数据
mysql 下 计算 两点 经纬度 之间的距离 含具体sql语句
Copyright © 2011-2022 走看看