Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.06.2011, 14:41
Новичок на форуме
Отправить личное сообщение для mistercx Посмотреть профиль Найти все сообщения от mistercx
 
Регистрация: 03.06.2011
Сообщений: 1

Сортировка картинок в броузере (дописать замыкание)
Всем доброго времени суток!

Делаю сортировку картинок в броузере мышкой:

<html>
<head>
<script>

var order = {
  first: null,
  second: null,
  opera: !!window.opera,
  down: function(img){ this.first = img },
  up: function(img){ if(this.opera){ this.exch(this.first,this.second) }else{ this.first = null }},
  over: function(img){ this.second = img; if(this.first!=null && !this.opera) this.exch(this.first,this.second) },
  out: function(img){ this.second = null },
  exch: function(){
    var tmp = new Image()
    tmp.src = this.second.src
    this.second.src = this.first.src
    this.first.src = tmp.src
    this.first = null
    tmp = null
  },
  sort: function(){
    var nodes = document.getElementsByTagName('IMG')
    var index = new Array()
    var sorted = new Array()
    for(i=0;i<nodes.length;i++){
      if(nodes[i].id.indexOf('img')==0){
        index.push(parseInt(nodes[i].id.substring(3)))
      }
    }
    index.sort()
    for(i=0;i<index.length;i++){
      path = document.getElementById('img'+index[i]).src.split('/')
      sorted.push(path[path.length-1])
    }
    index = null
    return sorted
  },
  init: function(){
    var nodes = document.getElementsByTagName('IMG')
    var index = new Array()
    for(i=0;i<nodes.length;i++){
      if(nodes[i].id.indexOf('img')==0){
        index.push(parseInt(nodes[i].id.substring(3)))
      }
    }
    for(i=0;i<index.length;i++){
      node = document.getElementById('img'+index[i])
      // тут дописать addEventListener
    }
  }
}

</script>
</head>
<body>
<img id='img1' src='01.jpg' style='cursor: pointer'  onmousedown='order.down(this)' onmouseup='order.up(this)' onmouseover='order.over(this)' onmouseout='order.out(this)'/>
<img id='img2' src='02.jpg' style='cursor: pointer'  onmousedown='order.down(this)' onmouseup='order.up(this)' onmouseover='order.over(this)' onmouseout='order.out(this)'/>
<img id='img3' src='03.jpg' style='cursor: pointer'  onmousedown='order.down(this)' onmouseup='order.up(this)' onmouseover='order.over(this)' onmouseout='order.out(this)'/>
<img id='img4' src='04.jpg' style='cursor: pointer'  onmousedown='order.down(this)' onmouseup='order.up(this)' onmouseover='order.over(this)' onmouseout='order.out(this)'/>
<img id='img5' src='05.jpg' style='cursor: pointer'  onmousedown='order.down(this)' onmouseup='order.up(this)' onmouseover='order.over(this)' onmouseout='order.out(this)'/>
<form name='f'>
<input name='s' type='button' value='sorting' onclick='alert(order.sort())'/>
</form>
</body>
</html>


Всё чудесно работает во всех броузерах. Хотелось бы ещё динамически определять 4 события на рисунках в функции init(), а не в коде HTML, для эстетической красоты т.с., но не получается корректно сделать замыкание на соответствующие функции объекта.

Если кто поможет с дописанием этих 4-х строчек (addEventListener) буду весьма признателен!
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2011, 14:09
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

init: function(){
    var nodes = document.getElementsByTagName('img');
    var index = [], res = [], node;
    var reImg = /^img(\d+)$/;
    for ( var i = 0; node = nodes[i]; i++ ) {
      if ( reImg.test( node.id + "" ) ) {
        index[ index.length ] = reImg.exec(node.id)[1] | 0;
        res[ res.length ] = nodes[i];
      }
    }
    var events = "mousedown mouseup mouseover mouseout".split(" ");
    for ( var i = 0; node = res[i]; i++ ) {
      for ( var j = events.length; j--; ) {
        var handler = (function(ctx, name, img){
          return function () {
            ctx[name].call(ctx, img);
          };
        })( this, events[j].replace("mouse",""), node );
        if ( node.addEventListener ) {
          node.addEventListener(events[j], handler, false); 
        } else if ( node.attachEvent ) {
          node.attachEvent('on' + events[j], handler );
        } else {
          node['on' + events[j]] = handler;
        }
      }
    }
  }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск