refactor!: Replace SortableJS 4/4: remove the SortableJS dependency entirely

README.md

@@ -21,7 +21,7 @@ We extended the project from the original SlickGrid foundation while also includ
 - removed jQueryUI requirement in [v3](https://github.com/6pac/SlickGrid/wiki/Major-version-3.0----Removal-of-jQueryUI-requirement-(replaced-by-SortableJS)) (replaced it with [SortableJS](https://sortablejs.github.io/Sortable/))
 - removed jQuery requirement in [v4](https://github.com/6pac/SlickGrid/wiki/Major-version-4.0---Removal-of-jQuery-requirement)
 - modernized the project in [v5](https://github.com/6pac/SlickGrid/wiki/Major-version-5.0-%E2%80%90-ES6-ESM-and-TypeScript-Support) by migrating to TypeScript (we kept IIFE and added ES6/ESM build targets) and we also gave SlickGrid a fresh and more modern look via a new Alpine Theme (CSS/SASS)
-- the project now only has 1 small dependency requirement which is [SortableJS](https://sortablejs.github.io/Sortable/)
+- the project now has **zero runtime dependencies** (the previous [SortableJS](https://sortablejs.github.io/Sortable/) requirement was replaced by a built-in native HTML5 drag & drop implementation for column reordering and draggable grouping)
 
 ### Common Questions & Answers
 - Do I need TypeScript to use version 5.x?

eslint.config.mjs

@@ -45,7 +45,6 @@ export default tseslint.config(
         ...globals.node,
         flatpickr: true,
         Slick: true,
-        Sortable: true,
         IIFE_ONLY: true
       },
       parser: tseslint.parser,

examples/example-0031-row-span-employees.html

@@ -92,8 +92,6 @@ <h2>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-  <script src="sortable-cdn-fallback.js"></script>
 
   <script src="../dist/browser/slick.core.js"></script>
   <script src="../dist/browser/slick.interactions.js"></script>

examples/example-0032-row-span-many-columns.html

@@ -112,8 +112,6 @@ <h2>View Source:</h2>
       </ul>
 	</table>
 
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-  <script src="sortable-cdn-fallback.js"></script>
 	<script src="../dist/browser/slick.core.js"></script>
   <script src="../dist/browser/slick.interactions.js"></script>
   <script src="../dist/browser/slick.grid.js"></script>

examples/example-0070-plugin-state.html

@@ -31,8 +31,6 @@ <h2>Options:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-auto-scroll-when-dragging.html

@@ -109,7 +109,6 @@ <h2>Demonstrates:</h2>
     </div>
   </div>
 
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
   <script src="../dist/browser/slick.core.js"></script>
   <script src="../dist/browser/slick.interactions.js"></script>

examples/example-autocomplete-editor.html

@@ -38,7 +38,6 @@ <h2>View Source:</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-autotooltips.html

@@ -41,7 +41,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-bootstrap-3-header.html

@@ -38,7 +38,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-checkbox-header-row.html

@@ -128,7 +128,6 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-checkbox-row-select.html

@@ -85,7 +85,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-colspan.html

@@ -28,8 +28,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-column-group.html

@@ -40,8 +40,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-column-hidden.html

@@ -87,7 +87,6 @@ <h2>View Source:</h2>
   <input style="width:100px;display:inline-block;" id="pcSlider2" type="range" min="1" max="100" value="1">
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-composite-editor-item-details.html

@@ -104,8 +104,6 @@ <h2>View Source:</h2>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 <script src="../lib/jquery.tmpl.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-composite-editor-modal-dialog.html

@@ -179,8 +179,6 @@ <h2>View Source:</h2>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-  <script src="sortable-cdn-fallback.js"></script>
 
   <script src="../dist/browser/slick.core.js"></script>
   <script src="../dist/browser/slick.interactions.js"></script>

examples/example-csp-header.html

@@ -49,7 +49,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>

examples/example-custom-column-value-extractor.html

@@ -30,7 +30,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-drag-row-between-grids.html

@@ -86,7 +86,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-draggable-grouping.html

@@ -149,8 +149,6 @@ <h2>View Source:</h2>
     </div>
   </div>
 
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-  <script src="sortable-cdn-fallback.js"></script>
 
   <script src="../dist/browser/slick.core.js"></script>
   <script src="../dist/browser/slick.interactions.js"></script>

examples/example-draggable-header-grouping.html

@@ -133,8 +133,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-dynamic-filtered-with-jquery-tabs.html

@@ -90,7 +90,6 @@ <h2>View Source:</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-dynamic-with-jquery-tabs.html

@@ -49,7 +49,6 @@ <h2>View Source:</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-excel-compatible-spreadsheet-dataview.html

@@ -77,8 +77,6 @@ <h2>View Source:</h2>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-excel-compatible-spreadsheet.html

@@ -71,8 +71,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="sortable-cdn-fallback.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-explicit-initialization.html

@@ -37,7 +37,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-external-headersort.html

@@ -31,7 +31,6 @@ <h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-footer-totals.html

@@ -43,7 +43,6 @@ <h2>View Source:</h2>
     </ul>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns-and-column-group-hidden-col.html

@@ -51,7 +51,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns-and-column-group.html

@@ -47,7 +47,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns-and-rows-spreadsheet.html

@@ -54,7 +54,6 @@ <h2>Range Selection</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns-and-rows.html

@@ -116,7 +116,6 @@ <h2>Demonstrates:</h2>
   Show tasks with title including <input type="text" id="txtSearch2">
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns-autoheight.html

@@ -54,7 +54,6 @@ <h2>
     </ul>
   </div>
 
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
   <script src="../dist/browser/slick.core.js"></script>
   <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns-large.html

@@ -105,7 +105,6 @@ <h2>Demonstrates:</h2>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns-tabs.html

@@ -111,7 +111,6 @@ <h2>Demonstrates:</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-columns.html

@@ -103,7 +103,6 @@ <h2>Demonstrates:</h2>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-frozen-row-reordering.html

@@ -88,7 +88,6 @@ <h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 <script src="../lib/jquery.event.drag-2.3.0.js"></script>
 <script src="../lib/jquery.event.drop-2.3.0.js"></script>

examples/example-frozen-rows.html

@@ -100,8 +100,6 @@ <h2>Demonstrates:</h2>
   <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js" defer></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-grid-menu.html

@@ -132,7 +132,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-grouping-checkbox-row-select.html

@@ -91,8 +91,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-grouping-esm.html

@@ -96,7 +96,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script type="module">
 import {

examples/example-grouping-groupcolumn.html

@@ -104,7 +104,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-grouping.html

@@ -99,7 +99,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-header-row.html

@@ -53,7 +53,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-html-sanitizer.html

@@ -27,7 +27,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-infinite-scroll-esm.html

@@ -68,8 +68,6 @@ <h4>Data Count</h4>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script type="module">
   import {

examples/example-jquery-accordion.html

@@ -49,7 +49,6 @@ <h2>View Source:</h2>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>

examples/example-master-detail-esm.html

@@ -50,8 +50,6 @@ <h2>View Source:</h2>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
-<script src="sortable-cdn-fallback.js"></script>
 
 <script type="module">
   import {