Меняем элементы местами Javascript

Бывают случаи, когда необходимо менять местами элементы какого-либо списка на веб-странице, не перезагружая ее. К примеру сообщения в форуме, категории товаров, порядок следования разделов в CMS. С этим пожожет справиться следующий скрипт.

При использовании его с технологией AJAX (AJAJ, AJAH..) можно настраивать сортировку разделов в панели управления сайтом.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Перемещение вверх-вниз</title>
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
div#listDiv {
  padding:5px;
  border:1px #000 solid;
  width:200px;
  margin:300px auto;
}

div.itemDiv {
  padding:2px;
  border-bottom:1px #999 solid;
  font:12px tahoma;
  width:190px;
}

div.itemDiv a {
  color:#00f;
  text-decoretion:none;
}
</style>

<script type="text/javascript">
function init() {
  bindClickUp();
  bindClickDn();
  colorized();
}

function colorized() {
  $('div.itemDiv').each(function(i){if(i % 2 == 1) $(this).css('backgroundColor','#eee')});
}

function bindClickUp() {
  var a_up = $('a.up');
  a_up.each(
    function(i) {
      this.onclick = function() {
        //if (i > 0) {
          var topHtml = $(a_up.get(i-1)).parent().html();
          var curHtml = $(this).parent().html();
          $(a_up.get(i-1)).parent().html(curHtml);
          $(this).parent().html(topHtml);
          init();
        //};        
      };
    }
  )
}
function bindClickDn() {
  var a_dn = $('a.dn');
  a_dn.each(
    function(i) {
      var contains = $('div.itemDiv');
      this.onclick = function() {
        //if (i < 4) {
          var botHtml = $(a_dn.get(i+1)).parent().html();
          var curHtml = $(this).parent().html();
          $(a_dn.get(i+1)).parent().html(curHtml);
          $(this).parent().html(botHtml);
          init();
        //};        
      };
    }
  )
}

$(document).ready(
  function() {
    init();
  }
);
</script>
</head>
<body>

<div id="listDiv">
<div class="itemDiv">Слой 1 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 2 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 3 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 5 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 6 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 7 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 8 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 9 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 10 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
</div>

</body>
</html>