Drag-and-Drop Ranking in Grid

Zachary Anderson
Last updated: 04 Mar 2022
Written for: Lighthouse Studio 9.3



Transforms the specified rows or columns from numeric ranking to drag-and-drop ranking.


  • Requires Better Lighthouse Library.
  • Any row / column that is going to be drag-and-drop should be set as ranking-type with numeric fields in the grid settings.
  • Lines 10-14 of the footer must be updated with which rows / columns are to have drag-and-drop and how many items are to be ranked. Example:
    var rankedListValues = {
    1: colsList.length, // set first row to drag-and-drop where all columns must be ranked (for col-oriented grid, use "rowsList.length")
    2: 2 // set the second row to drag-and-drop where two items must be ranked

    Uncommenting lines 15-17 will set each row to use drag-and-drop with all items being ranked.
    Uncommenting lines 18-20 will set each column to use drag-and-drop with all items being ranked.


  • Line 21 of the footer can be updated with whether the first click should rank the entire row / column.
  • Line 22 and line 23 of the footer can be used to hide the first row / first column of the non-mobile grid.


So alternating colors look best, it is recommended that you set "Alternating Color Direction" to the same value as your grid orientation.