☰

TSLibrary - Draggable Table Rows

Allows dragging of table rows

目前为 2016-05-27 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/19970/127976/TSLibrary%20-%20Draggable%20Table%20Rows.js 

  1. // ==UserScript==
  2. // @name                    TSLibrary - Draggable Table Rows
  3. // @namespace               TimidScript
  4. // @version                 1.0.9
  5. // @description             Allows dragging of table rows
  6. // @author                  TimidScript
  7. // @homepageURL             https://github.com/TimidScript
  8. // @copyright               © 2016 TimidScript, Some Rights Reserved.
  9. // @license                 Read "License + Copyright Notice" inside the script
  10. // @exclude                 *
  11. // ==/UserScript==
  12.  
  13. /* License + Copyright Notice
  14. ********************************************************************************************
  15. Copyright © TimidScript, Some Rights Reserved.
  16.  
  17. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
  18. following conditions are met:
  19.  
  20. 1) GPL-3 License is met that does not conflict with the rest of the license
  21. 2) This notice must be included
  22. 3) Due credits and link to original author's homepage (included in this notice).
  23. 4) Notify the original author of redistribution
  24. 5) Clear clarification of the License and Notice to the end user
  25. 6) Do not upload on OpenUserJS.org
  26.  
  27. TimidScript's Homepages:  [GitHub](https://github.com/TimidScript)
  28.                           [GreasyFork](https://greasyfork.org/users/1455-timidscript
  29. */
  30. /* Information
  31. ********************************************************************************************
  32.  How to Use
  33. ----------------------------------------------
  34. Use the function TSRegisterTable(table, rowSwapEvent) to register table.
  35. Use the function TSUNRegisterTable(table) to un-register table.
  36.  
  37. ----------------------------------------------
  38.     Version History
  39. ----------------------------------------------
  40. 1.0.9 (2016-05-27)
  41.  - License altered
  42. 1.0.8 (2016-04-03)
  43.  - Changed license to GPL-3
  44. 1.0.7 (2015/10/06)
  45.  - Bug Fix: When swapping I didn't get the row element
  46. 1.0.6 (2014/12/12)
  47.  - @exclude added
  48. 1.0.4 (2014-07-01)
  49.  - rowSwapEvent(true) is fired when row swap has occurred only
  50. 1.0.3 (2014-07-31)
  51.  - rowSwapEvent expects a value that is set to true when operation is complete.
  52.  - A way to un-register table is added (TSUnRegisterTable)
  53. 1.0.2 (2014-07-31)
  54.  - Changed to use addEventListener
  55.  - Added a callback rowSwapEvent that gets fired when rows are swapped
  56. 1.0.1 (2014-07-30)
  57.  - Initial Release
  58. **********************************************************************************************/
  59.  
  60. var TableEvent =
  61. {
  62.     clickedRow: null,
  63.     swapped: false,
  64.  
  65.     mouseMove: function (e, rowSwapEvent)
  66.     {
  67.         if (this.clickedRow && this.clickedRow != e.target.parentElement)
  68.         {
  69.             var row1 = this.clickedRow,
  70.                 row2 = TableEvent.getTableRow(e.target);
  71.  
  72.             if (row1.rowIndex < row2.rowIndex) row1.parentElement.insertBefore(row2, row1);
  73.             else row1.parentElement.insertBefore(row1, row2);
  74.             this.swapped = true;
  75.             if (this.rowSwapEvent) this.rowSwapEvent();
  76.         }
  77.     },
  78.  
  79.     mouseDown: function (e)
  80.     {
  81.         this.clickedRow = TableEvent.getTableRow(e.target);
  82.         this.clickedRow.style.cursor = "move";
  83.         this.swapped = false;
  84.     },
  85.  
  86.     mouseUp: function (e, rowSwapEvent)
  87.     {
  88.         this.clickedRow.style.cursor = null;
  89.         this.clickedRow = null;
  90.         if (this.rowSwapEvent && this.swapped) this.rowSwapEvent(true);
  91.     },
  92.  
  93.     mouseLeave: function (e, rowSwapEvent)
  94.     {
  95.         this.clickedRow.style.cursor = null;
  96.         this.clickedRow = null;
  97.         if (this.rowSwapEvent && this.swapped) this.rowSwapEvent(true);
  98.     },
  99.  
  100.     getTableRow: function (node)
  101.     {
  102.         while (node.tagName != "TR") node = node.parentElement;
  103.         return node;
  104.     }
  105. };
  106.  
  107. /*
  108.     Just call TSRegisterTable and pass the table you want to have draggable rows.
  109.     <rowSwapEvent(complete)> is called when rows are moved. complete is a boolean
  110.     value that is set to true when complete.
  111. ----------------------------------------------------------------------------------*/
  112. function TSRegisterTable(table, rowSwapEvent)
  113. {
  114.     table.rowSwapEvent = rowSwapEvent;
  115.     table.addEventListener("mousemove", TableEvent.mouseMove);
  116.     table.addEventListener("mousedown", TableEvent.mouseDown);
  117.     table.addEventListener("mouseup", TableEvent.mouseUp);
  118.     table.addEventListener("mouseleave", TableEvent.mouseLeave);
  119. }
  120.  
  121. /*
  122.     Call TSUnRegisterTable to remove drag ability
  123. ----------------------------------------------------------------------------------*/
  124. function TSUnRegisterTable(table)
  125. {
  126.     table.rowSwapEvent = null;
  127.     table.removeEventListener("mousemove", TableEvent.mouseMove);
  128.     table.removeEventListener("mousedown", TableEvent.mouseDown);
  129.     table.removeEventListener("mouseup", TableEvent.mouseUp);
  130.     table.removeEventListener("mouseleave", TableEvent.mouseLeave);
  131. }