☰

TSLibrary - Draggable Table Rows

Allows dragging of table rows

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/19970/153736/TSLibrary%20-%20Draggable%20Table%20Rows.js 

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