另一个行拖动效果

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>

机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年

查看全文

相关阅读:
html实现滚动播报（原生JS实现）
移动端H5页面惯性滑动监听
 简单线条、任意填充色的小图标（含自制方法）
git和github新手安装使用教程（三步入门）
node.js的安装配置——前端的配置
 Sublime Text 3 一些简单使用
 $.ajax() 方法的理解
 前端知识点
 （6）一些工作和生活的经验分享，以后还会不断补充添加
 （5.1）Opencv库学习第二部分

原文地址：https://www.cnblogs.com/rubylouvre/p/2063294.html