日期:2014-05-17 浏览次数:20660 次
原理:根据待选择元素与当前选中元素的最短距离来判断下一操作应该选中哪个元素。
?
代码如下:
/* 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