Gestion Boite

Tube ADN

by tibum

HTML

<ul id="sortable_nav" class="sortable ui-sortable">
  <li class="ui-state-default" style=""><span class="ui-icon ui-icon-arrowthick-2-n-s">
    </span> Apple
    <div class="ui-state-default sortable-number">
      1
    </div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Mengo
    <div class="ui-state-default sortable-number">
      2
    </div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Banana
    <div class="ui-state-default sortable-number">
      3
    </div>
    42 ng/ul
    </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Ginger
    <div class="ui-state-default sortable-number">
      4
    </div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Watermelon
    <div class="ui-state-default sortable-number">
      5
    </div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Blackberry
    <div class="ui-state-default sortable-number">
      6
    </div>
  </li>
</ul>

CSS

body {
  padding: 10px;
}

.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

.sortable li {
  float: left;
  border: 2px solid cornflowerblue;
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  width: 100px;
  height: 90px;
}

.sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

.ui-state-highlight {
  height: 1.5em;
  line-height: 1.2em;
}

.sortable-number {
  width: 25px;
  float: right;
  line-height: 1em;
  text-align: center;
  font-weight: bold;
  border: 2px solid cornflowerblue;
}

JavaScript

var $sortableList = $("#sortable_nav");

var sortEventHandler = function(event, ui) {
  console.log("New sort order!");

  var listElements = $sortableList.children();

  console.log(listElements); // [ <li>, <li>, ... ]

  var listValues = [];

  listElements.each(function(element) {
    listValues.push(this.innerText);
    //console.log(element);
  });

  console.log(listValues);
};

$("#sortable_nav").sortable({
	stop: sortEventHandler,
  placeholder: "ui-state-highlight",
  helper: 'clone',
  sort: function(e, ui) {
    $(ui.placeholder).html(Number($("#sortable_nav > li:visible").index(ui.placeholder)) + 1);
  },
  update: function(event, ui) {
    var $lis = $(this).children('li');
    $lis.each(function() {
      var $li = $(this);
      var newVal = $(this).index() + 1;
     
    });
  }
});
$("#sortable_nav").disableSelection();