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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
document.createElement()用法
Mar 13 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
node内置调试方法总结
Feb 22 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
深入理解JavaScript 箭头函数
May 30 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执行速度全攻略(上)
2006/10/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
Node.js开启Https的实践详解
2016/10/25 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
捐助贫困学生倡议书
2014/05/16 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
杭白菊导游词
2015/02/10 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB