javascript实现行拖动的方法


Posted in Javascript onMay 27, 2015

本文实例讲述了javascript实现行拖动的方法。分享给大家供大家参考。具体如下:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行拖动</title>
<script>
 window.onload = function(){
 //绑定事件
 var addEvent = document.addEventListener ? function(el,type,callback){
  el.addEventListener( type, callback, !1 );
 } : function(el,type,callback){
  el.attachEvent( "on" + type, callback );
 }
 //判定对样式的支持
 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;
 })();
 var userSelect = getStyleName("user-select");
 //精确获取样式
 var getStyle = document.defaultView ? function(el,style){
  return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
 } : function(el,style){
  style = style.replace(/\-(\w)/g, function($, $1){
  return $1.toUpperCase();
  });
  return el.currentStyle[style];
 }
 var dragManager = {
  y:0,
  dragStart:function(e){
  e = e || event;
  var handler = e.target || e.srcElement;
  if(handler.nodeName === "TD"){
  handler = handler.parentNode;
  dragManager.handler = handler;
  if(!handler.getAttribute("data-background")){
  handler.setAttribute("data-background",getStyle(handler,"background-color"))
  }
  //显示为可移动的状态
  handler.style.backgroundColor = "#ccc";
  handler.style.cursor = "move";
  dragManager.y = e.clientY;
  if(typeof userSelect === "string"){
  return document.documentElement.style[userSelect] = "none";
  }
  document.unselectable = "on";
  document.onselectstart = function(){
  return false;
  }
  }
  },
  draging:function(e){//mousemove时拖动行
  var handler = dragManager.handler;
  if(handler){
  e = e || event;
  var y = e.clientY;
  var down = y > dragManager.y;//是否向下移动
  var tr = document.elementFromPoint(e.clientX,e.clientY);
  if(tr && tr.nodeName == "TD"){
  tr = tr.parentNode
  dragManager.y = y;
  if( handler !== tr){
   tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr));
  }
  };
  }
  },
  dragEnd:function(){
  var handler = dragManager.handler
  if (handler) {
  handler.style.backgroundColor = handler.getAttribute("data-background");
  handler.style.cursor = "default";
  dragManager.handler = null;
  }
  if(typeof userSelect === "string"){
  return document.documentElement.style[userSelect] = "text";
  }
  document.unselectable = "off";
  document.onselectstart = null;
  },
  main:function(el){
  addEvent(el,"mousedown",dragManager.dragStart);
  addEvent(document,"mousemove",dragManager.draging);
  addEvent(document,"mouseup",dragManager.dragEnd);
  }
 }
 var el = document.getElementById("table");
 dragManager.main(el);
 }
</script>
<style>
.table{width:60%;border: 1px solid red;border-collapse: collapse;}
.table td{border: 1px solid red;height: 20px;}
</style>
</head>
<body>
<h1>行拖动</h1>
<table id="table" class="table">
<tbody>
<tr><td>1</td><td>One</td><td>dom.require</td></tr>
<tr id="2" ><td class="2">2</td><td>Two</td><td>ControlJS </td></tr>
<tr id="3" ><td class="3">3</td><td>Three</td><td>HeadJS</td></tr>
<tr id="4" ><td class="4">4</td><td>Four</td><td>LAB.js</td></tr>
<tr id="5" ><td class="5">5</td><td>Five</td><td>$script.js</td></tr>
<tr id="6" ><td class="6">6</td><td>Six</td><td>NBL.js</td></tr>
</tbody>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
node.js超时timeout详解
Nov 26 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
Vue3.0的优化总结
Oct 16 Javascript
JavaScript操作Cookie方法实例分析
May 27 #Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 #Javascript
jquery预加载图片的方法
May 27 #Javascript
jQuery仿gmail实现fixed布局的方法
May 27 #Javascript
js实现键盘Enter键提交表单的方法
May 27 #Javascript
js实现简单锁屏功能实例
May 27 #Javascript
JS实现简单路由器功能的方法
May 27 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
C++程序员求职信范文
2014/04/14 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
大专护理专业自荐信
2015/03/25 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL