search

Home  >  Article  >  Web Front-end  >  How to implement row dragging in javascript_javascript skills

How to implement row dragging in javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:57:371082browse

本文实例讲述了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 &#63; 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 &#63; 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 &#63; 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程序设计有所帮助。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript method to sort tables or elements by text, number or date_javascript tipsNext article：JavaScript method to sort tables or elements by text, number or date_javascript tips

Related articles

See more