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>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文
相关阅读:
071:【Django数据库】ORM聚合函数详解-Avg
实战:百度知道营销,自问自答技巧(下)
实战:百度知道营销,自问自答技巧(上)
QQ群排名霸屏技术居然是这样简单
百度云盘,资源引流的温床,你绝对值得拥有!
PC时代 常用搜索引擎高级指令 勿忘
免费影视资源 日引不说几百上千 反正绝对不会是零
QQ兴趣部落 大批量引流实战技巧
新媒体运营之话说如此操作更容易出站街号。
QQ群认证 人数再度扩容 权限随之升级
原文地址:https://www.cnblogs.com/rubylouvre/p/2063294.html
最新文章
哨兵机制的原理
大数据调度工具oozie详细介绍
java8 :: 用法 (JDK8 双冒号用法)
开发基础之牛逼哄哄的 Lambda 表达式,简洁优雅就是生产力
常用Linux命令
彻底理解 Cookie、Session、Token
String中intern方法的作用
java多线程的几种实现方式
Linux查看CPU和内存使用情况
java提高篇-----HashMap
热门文章
kafka可视化客户端工具(Kafka Tool)的基本使用
080:【Django数据库】QuerySet API详解-order_by:
079:【Django数据库】QuerySet API详解-filter、exclude、annotate
078:【Django数据库】objects对象所属类原理剖析
077:【Django数据库】Q表达式详解
076:【Django数据库】F表达式详解
075: 【Django数据库】ORM聚合函数详解-Sum
074:【Django数据库】ORM聚合函数详解-Max和Min
073:【Django数据库】ORM聚合函数详解-Count
072:【Django数据库】ORM聚合函数详解-aggregate和annotate
Copyright © 2011-2022 走看看