☰

TSLibrary - Draggable Table Rows

Allows dragging of table rows

目前為 2016-05-25 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/19970/127660/TSLibrary%20-%20Draggable%20Table%20Rows.js 

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