日期:2014-05-17 浏览次数:20810 次
原理:根据待选择元素与当前选中元素的最短距离来判断下一操作应该选中哪个元素。
?
代码如下:
/*
var arg = {
elements:[],
current:jqueryObj || index,//index is in elements
initCallback:function(){},
moveCallback:function(){},
ensureCallback:function(){}
};
*/
function KeyMove(arg){
var LEFT = 1,RIGHT = 2,UP = 3,DOWN = 4;
function filter(current,arr,direction){
var resultarr = [];
if(direction == LEFT){
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]["left"] + arr[i]["width"] < current["left"] && arr[i]["width"] > 0){
resultarr.push(arr[i]);
}
}
}else if(direction == RIGHT){
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]["left"] > current["left"] + arr[i]["width"] && arr[i]["width"] > 0){
resultarr.push(arr[i]);
}
}
}else if(direction == UP){
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]["top"] + arr[i]["height"]< current["top"] && arr[i]["height"] > 0){
resultarr.push(arr[i]);
}
}
}else if(direction == DOWN){
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]["top"] > current["top"] + arr[i]["height"] && arr[i]["height"] > 0){
resultarr.push(arr[i]);
}
}
}
return resultarr;
}
//{top:"",left:""}
var elemarr = arg.elements;
var positionArr = new Array(elemarr.length);
for(var i=0,len=elemarr.length;i<len;i++){
positionArr[i] = $(elemarr[i]).position();
positionArr[i].index = i;
positionArr[i].width = $(elemarr[i]).width();
positionArr[i].height = $(elemarr[i]).height();
}
var current = isNaN(arg.current) ? arg.current : elemarr[arg.current];
var _arg = {
current:null,
pre:null,
e:null
};
var $pre = _arg.current = _arg.pre = $(current);
if(typeof arg.initCallback == "function")
arg.initCallback.call(_arg);
var currentPosition = $(current).position();
currentPosition.width = $(current).width();
currentPosition.height = $(current).height();
addListener(function(){
_arg.e = this.e;
if(this.keycode == 37){//left
var temparr = filter(currentPosition,positionArr,LEFT);
if(temparr.length > 0)
current = getMinDistanceElem(currentPosition,temparr);
}else if(this.keycode == 39){//right
var temparr = filter(currentPosition,positionArr,RIGHT);
if(temparr.length > 0)
current = getMinDistanceElem(currentPosition,temparr);
}else if(this.keycode == 38){//up
var temparr = filter(currentPosition,positionArr,UP);
if(temparr.length > 0)
current = getMinDistanceElem(currentPosition,temparr);
}else if(this.keycode == 40){//down
var temparr = filter(currentPosition,positionArr,DOWN);
if(temparr.length > 0)
current = getMinDistanceElem(currentPosition,temparr);
}else if(this.keycode == 13){
if(typeof arg.ensureCallback == "function")
arg.ensureCallback.call(_arg);
}
currentPosition = $(current).position();
currentPosition.width = $(current).width();
currentPosition.height = $(current).height();
_arg.current = $(current);
if(typeof arg.moveCallback == "function")
arg.moveCallback.call(_arg);
_arg.pre = $pre = $(current);
});
function getMinDistanceElem(current,arr){
var index = 0;
var minDistance = 1000000;
for(var i=0,len=arr.length;i<len;i++){
var tempdistance = distance(current,arr[i]);
if(tempdistance < minDistance){
index = i;
minDistance = tempdistance;
}
}
return elemarr[arr[index].index];
}
function distance(o1,o2){
return Math.sqrt(Math.pow(o1.left - o2.left,2) + Math.pow(o1.top - o2.top,2));
}
function addListener(fn){
if(typeof fn == "function"){
document.addEventListener("keydown",function(event){
//IE doesn't pass in the event object
var event = event || window.event;
//IE uses srcElement as the target
var target = event.target || event.srcElement;
var keycode = event.keyCode || event.which;
this.tar