adongy/index.html

## index.html
<!DOCTYPE html>
<html>
  <body>
    <form id="form" action="">
      <div style="width:50%; margin: 0 auto;">
		<div style="width:50%; float: left;">
          <div>
            List A
          </div>
          <ol id="foo" style="padding: 5px 1em;">
            <li data-id="A-1">
              <input type="text" name="A-1" style="width: 2em;" maxlength="3">
              A-1: Bla
            </li>
            <li data-id="A-2">
              <input type="text" name="A-2" style="width: 2em;" maxlength="3">
              A-2: Bli
            </li>
            <li data-id="A-4">
              <input type="text" name="A-4" style="width: 2em;" maxlength="3">
              A-4: Blo
            </li>
            <li data-id="B-1">
              <input type="text" name="B-1" style="width: 2em;" maxlength="3">
              B-1: Cla
            </li>
            <li data-id="B-6">
              <input type="text" name="B-6" style="width: 2em;" maxlength="3">
              B-6: Cle
            </li>
            <li data-id="B-7">
              <input type="text" name="B-7" style="width: 2em;" maxlength="3">
              B-7: Clo
            </li>
          </ol>
      </div>
      <div style="width:50%; float: right;">
        <div>
          List B
        </div>
        <ol id="bar" style="padding: 5px 1em; background-color: lightblue;">
        </ol>
      </div>
  </div>
  <div style="width:50%;">
    &nbsp;
  </div>
  <input type="submit">
  </form>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>
  <script src="http://rubaxa.github.io/Sortable/Sortable.js">
  </script>
  <script>

      $( document ).ready(function() {
        Sortable.create(document.getElementById("foo"), {
          group: "words",
          animation: 150,
          store: {
            get: function (sortable) {
              var order = localStorage.getItem(sortable.options.group);
              return order ? order.split('|') : [];
            }
            ,
            set: function (sortable) {
              var order = sortable.toArray();
              localStorage.setItem(sortable.options.group, order.join('|'));
            }
          }
        }
                       );


        var out = Sortable.create(document.getElementById("bar"), {
          group: "words",
          animation: 150,
          store: {
            get: function (sortable) {
              var order = localStorage.getItem(sortable.options.group);
              return order ? order.split('|') : [];
            }
            ,
            set: function (sortable) {
              var order = sortable.toArray();
              localStorage.setItem(sortable.options.group, order.join('|'));
            }
          }
        }
                                 );
        $('#form').submit(function(event) {
          var order = out.toArray();
          var values = {
          };
          var val_len = 0;
          $.each($('#form').serializeArray(), function(i, field) {
            values[field.name] = field.value;
            val_len = i+1;
          }
                );
          console.log(values);
          console.log(val_len);
          console.log(order);
          console.log(order.length);
          if (order.length != val_len) {
            // pas tout classé
            alert("vous n'avez pas classé tous les choix");
            event.preventDefault();
            return;
          };
          var mises = [0, 0, 0, 0, 0]; // preallocate for speed
          for (var i=0, limit=5; i<limit; i++) {
            var number = parseInt(values[order[i]]);
            if (isNaN(number)) {
              // pas de mise
              alert("mauvaise mise pour un des premiers 5 elements");
              event.preventDefault();
              return;
            };
            mises[i] = number;
          };
          var total = 0;
          $.each(mises,function() {
            total += this;
          });
          if (total != 100){
            alert("mise total pas egale a 100");
            event.preventDefault();
            return;
          }
          //ramener à 100
          /* comment ramner à 100 pour des entiers? sachant que la somme doit toujours faire cent, il faut décider comment arrondir
          if (total != 100) {
          for (var i=0, limit=4; i<limit; i++) {
          mises[i] = mises[i]*100/total;
          }
          mises[5] = ....; // que faire ici
          }
          */


          event.preventDefault();// pas là en vrai, on affiche les valeurs
          alert(mises);
          alert(order);
        });
      });
  </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<form id="form" action="">
	<div style="width:50%; margin: 0 auto;">
	<div style="width:50%; float: left;">
	<div>
	List A
	</div>
	<ol id="foo" style="padding: 5px 1em;">
	<li data-id="A-1">
	<input type="text" name="A-1" style="width: 2em;" maxlength="3">
	A-1: Bla
	</li>
	<li data-id="A-2">
	<input type="text" name="A-2" style="width: 2em;" maxlength="3">
	A-2: Bli
	</li>
	<li data-id="A-4">
	<input type="text" name="A-4" style="width: 2em;" maxlength="3">
	A-4: Blo
	</li>
	<li data-id="B-1">
	<input type="text" name="B-1" style="width: 2em;" maxlength="3">
	B-1: Cla
	</li>
	<li data-id="B-6">
	<input type="text" name="B-6" style="width: 2em;" maxlength="3">
	B-6: Cle
	</li>
	<li data-id="B-7">
	<input type="text" name="B-7" style="width: 2em;" maxlength="3">
	B-7: Clo
	</li>
	</ol>
	</div>
	<div style="width:50%; float: right;">
	<div>
	List B
	</div>
	<ol id="bar" style="padding: 5px 1em; background-color: lightblue;">
	</ol>
	</div>
	</div>
	<div style="width:50%;">

	</div>
	<input type="submit">
	</form>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
	</script>
	<script src="http://rubaxa.github.io/Sortable/Sortable.js">
	</script>
	<script>

	$( document ).ready(function() {
	Sortable.create(document.getElementById("foo"), {
	group: "words",
	animation: 150,
	store: {
	get: function (sortable) {
	var order = localStorage.getItem(sortable.options.group);
	return order ? order.split('\|') : [];
	}
	,
	set: function (sortable) {
	var order = sortable.toArray();
	localStorage.setItem(sortable.options.group, order.join('\|'));
	}
	}
	}
	);


	var out = Sortable.create(document.getElementById("bar"), {
	group: "words",
	animation: 150,
	store: {
	get: function (sortable) {
	var order = localStorage.getItem(sortable.options.group);
	return order ? order.split('\|') : [];
	}
	,
	set: function (sortable) {
	var order = sortable.toArray();
	localStorage.setItem(sortable.options.group, order.join('\|'));
	}
	}
	}
	);
	$('#form').submit(function(event) {
	var order = out.toArray();
	var values = {
	};
	var val_len = 0;
	$.each($('#form').serializeArray(), function(i, field) {
	values[field.name] = field.value;
	val_len = i+1;
	}
	);
	console.log(values);
	console.log(val_len);
	console.log(order);
	console.log(order.length);
	if (order.length != val_len) {
	// pas tout classé
	alert("vous n'avez pas classé tous les choix");
	event.preventDefault();
	return;
	};
	var mises = [0, 0, 0, 0, 0]; // preallocate for speed
	for (var i=0, limit=5; i<limit; i++) {
	var number = parseInt(values[order[i]]);
	if (isNaN(number)) {
	// pas de mise
	alert("mauvaise mise pour un des premiers 5 elements");
	event.preventDefault();
	return;
	};
	mises[i] = number;
	};
	var total = 0;
	$.each(mises,function() {
	total += this;
	});
	if (total != 100){
	alert("mise total pas egale a 100");
	event.preventDefault();
	return;
	}
	//ramener à 100
	/* comment ramner à 100 pour des entiers? sachant que la somme doit toujours faire cent, il faut décider comment arrondir
	if (total != 100) {
	for (var i=0, limit=4; i<limit; i++) {
	mises[i] = mises[i]*100/total;
	}
	mises[5] = ....; // que faire ici
	}
	*/


	event.preventDefault();// pas là en vrai, on affiche les valeurs
	alert(mises);
	alert(order);
	});
	});
	</script>
	</body>
	</html>