Сортировка картинок в броузере (дописать замыкание)
Всем доброго времени суток!
Делаю сортировку картинок в броузере мышкой:
<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) буду весьма признателен! |
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;
}
}
}
}
|
| Часовой пояс GMT +3, время: 06:49. |