JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div><p> Vous pouvez modifier l'ordre des colonnes du tableau en déplacant les entêtes. Cliquez sur le bouton "sauvegarder" pour voir ce qui sera sauvegardé en base. La sauvegarde n'est pas opérationnelle. Le bouton "rejouer la sequence" permet de rejouer la dernière savegarde. Par défaut, la séquence est 5, 0, 4, 1, 2, 3. vous pouvez la modifier pour essayer. Allez dans le carré 'Javascript' en bas à gauche et modifiez les numéros dans la ligne "var arrayPos = new Array(5,0,4,1,2,3)". Cliquez ensuite sur le bouton "Run" en haut à gauche pour prendre en compte les changements</p><br/><br/></div>
<div id="mainDiv">
    <table id="oldTable" class="classtable draggable forget-ordering">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
            <th>F</th>
        </tr>
        <tr>
            <td>a1</td>
            <td>b1</td>
            <td>c1</td>
            <td>d1</td>
            <td>e1</td>
            <td>f1</td>
        </tr>
        <tr>
            <td>a2</td>
            <td>b2</td>
            <td>c2</td>
            <td>d2</td>
            <td>e2</td>
            <td>f2</td>
        </tr>
        <tr>
            <td>a3</td>
            <td>b3</td>
            <td>c3</td>
            <td>d3</td>
            <td>e3</td>
            <td>f3</td>
        </tr>
    </table>
</div>
<div><button id="okbutton">sauvegarder la sequence</button></div>
<div><button id="gobutton">rejouer la sequence</button></div>
<div id="divResult">
</div>

CSS

.classtable, .classtable td, .classtable th{
    border:solid 1px #bbb;
}
.classtable th{
    font-weight:bold;
    color:navy;
}

JavaScript

$(document).ready(function(){
		
			var arrayPos = new Array(5,0,4,1,2,3); // correspond à : 4 5 6 1 2 3 (d e f a b c)
			
                    //ajout d'identifiants virtuels sur les colonnes (oui, je triche)
                    var i =0;
                    $('#oldTable th').each(function(){
                          $(this).prop('id',i++);
					});

			
			$("#gobutton").click(function(){
				var $matab = document.getElementById("oldTable");
				//parcours du tableau
				for(l=0;l<arrayPos.length;l++){
					var t = parseInt(l)+1;
					var curcol = $("#oldTable tr th:nth-child("+t+")");
					var colId = curcol.prop("id");
					//alert("id : "+colId+"   ==> "+arrayPos[l]);
					//la colonne est elle à la bonne position
					if(arrayPos[l]==colId){continue;}
					else{
						var targetCol = $("#oldTable th[id='"+arrayPos[l]+"']");
						var colIndex = targetCol.index();	//alert("index : "+colIndex);
						dragtable.moveColumn($matab, colIndex, l);
					}
				}
			});
			
			$("#okbutton").click(function(){
				var newArray = new Array();
				for(l=0;l<arrayPos.length;l++){
					var t = parseInt(l)+1;
					var curcol = $("#oldTable tr th:nth-child("+t+")");
					var colId = curcol.prop("id");
					newArray.push(colId);
				}
				alert(newArray);
			});
			
		});


dragtable = {
  // How far should the mouse move before it's considered a drag, not a click?
  dragRadius2: 100,
  setMinDragDistance: function(x) {
    dragtable.dragRadius2 = x * x;
  },

  // How long should cookies persist? (in days)
  cookieDays: 365,
  setCookieDays: function(x) {
    dragtable.cookieDays = x;
  },

  // Determine browser and version.
  // TODO: eliminate browser sniffing except where it's really necessary.
  Browser: function() {
    var ua, s, i;

    this.isIE    = false;
    this.isNS    = false;
    this.version = null;
    ua = navigator.userAgent;

    s = "MSIE";
    if ((i = ua.indexOf(s)) >= 0) {
      this.isIE = true;
      this.version = parseFloat(ua.substr(i +...