Всем доброго времени суток!
Делаю сортировку картинок в броузере мышкой:
<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) буду весьма признателен!