用箭頭鍵移動元素

我在頁面上有2個div，我希望用戶能夠用箭頭鍵移動。我嘗試通過使用焦點來區分它們，但是太多的項目（如輸入）可以獲得焦點。目前，當我點擊div的時候，我正在使用虛線「聚焦」的css樣式，使其脫穎而出，並從其他div中刪除樣式。用箭頭鍵移動元素

.focused{ 
    border: 1px dashed #cccccc; 
} 


$('#tagCommon').click(function(){ 
    $(this).focus().addClass("focus2"); 
    $('#tagLatin').removeClass("focus2"); 
});

我認爲this將工作攔截關鍵事件。

那麼，如何才能移動具有focus2類的對象呢？喜歡的東西：

$(document).keydown(function(e) { 
    switch (e.which) { 
    case 37: 
     $('only the div that has class focus2').stop().animate({ 
      left: '-= 10' 
     }); //left arrow key 
     break; 
    } 
});

非常感謝您的再次拯救我，託德

來源

2012-06-15 maddogandnoriko

在這個問題的答案，與'.focus2'替換'div'。 – Blender

謝謝......我一直在研究這個問題很久，我沒有在我面前看到答案。 DOH！ – maddogandnoriko

我不知道，如果你仍然需要一個解決方案或沒有，但你可以檢查這一個： http://jsfiddle.net/ft2PD/41/

下面是HTML

<div id='div1'> 
    <input type='text' value='hello' /> 
</div> 

<div id='div2'> 
    <label> World</label> 
</div>

這裏是JavaScript：

$(document).ready(function(){ 
    $('#div1,#div2').click(function(){ 
     $('div.selected').removeClass('selected'); 
     $(this).addClass('selected'); 

    })}).keyup(function(e){ 
     var div = $('div.selected'); 
     console.log(div); 
     console.log(e.which);    
     switch (e.which) { 
    case 37: 
     $(div).stop().animate({ 
      left: '-=10' 
     }); //left arrow key 
     break; 
    case 38: 
     $(div).stop().animate({ 
      top: '-=10' 
     }); //up arrow key 
     break; 
    case 39: 
     $(div).stop().animate({ 
      left: '+=10' 
     }); //right arrow key 
     break; 
    case 40: 
     $(div).stop().animate({ 
      top: '+=10' 
     }); //bottom arrow key 
     break; 
    } 
    });

和持續的CSS

#div1 
{ 
    position: absolute; 
    width:100px; 
    height:100px; 
    margin:15px; 
    padding:15px; 
    border: thin solid #D2D2D2; 
} 
#div2 
{ 
    position: absolute; 
    width:50%; 
    margin:15px; 
    padding:15px; 
    border: thin solid #D2D2D2; 
} 
.selected 
{ 
    border: 1px dashed #cccccc !important; 
}

來源

2012-06-15 00:48:55 Nir

用箭頭鍵移動元素

回答

相關問題