通過點擊方向按鈕在容器內移動圖像？

我有一個圖像在容器內。我的要求是移動容器內的圖像並獲得其座標。以前我用可拖動函數來實現。通過點擊方向按鈕在容器內移動圖像？

但現在我想通過使用箭頭鍵相同的行爲。請幫忙。謝謝。

我以前的代碼

HTML

<div id="claw" name='claw' style="overflow:hidden;width:320px;height:240px;position: relative; left: 0; top: 0;"> 
    <img id='machine_image' /> 
    <img id='pointer' src='images/circle.png' name='image' style="position: absolute; top: 105px; left: 145px;"> 
    </div>

JQuery的

$('#pointer').draggable({ 
cursor: 'move', 
    containment: '#claw', 
    stop: function() { 
     var cont = $('#claw').offset(); 
     var img = $(this).offset(); 
     x = img.left - cont.left; 
     y = img.top - cont.top; 
    } 
});

來源

2014-12-30 varun nayyar

定義*拖動* ..？通常這意味着，在點擊並持有某些東西后移動鼠標，這些東西會發出各種鼠標事件，而您所使用的庫依賴於這些事件。看起來這不是你想要的。所以你可能想明確解釋你想要的東西。 –

你的意思是當你按下箭頭鍵（←，↑，→，↓）時，圖像應該朝那個方向移動？ – Rhumborl

@Rhumborl，是... –

這不是拖 - 你需要聽事件和處理移動自己的形象。這與jQuery不太難。

你基本上需要看看他們是否按下了一個箭頭鍵，檢查移動不會超出容器（如果這是你想要的），然後移動圖像並存儲新的座標。請注意，如果他們按住該鍵，則會重複調用事件，並且圖像將繼續移動。

// store x and y globally so you can use them wherever you need to 
 
var x, y; 
 

 
$(function() { 
 
    // set how many pixels to move on each press 
 
    var step = 5; 
 
    // cache references to pointer and claw jquery objects 
 
    var thePointer = $('#pointer'); 
 
    var theClaw = $('#claw'); 
 

 
    $('body').on('keydown', function(e) { 
 
     // get the current position 
 
     // this is already relative to claw so no need to work it out 
 
     var pos = thePointer.position(); 
 

 
     // now check which key was pressed 
 
     switch(e.which) 
 
     { 
 
      case 38: // up 
 
       if(pos.top >= step) { // check it will not go out the container 
 
        pos.top -= step;  // update the stored position 
 
        thePointer.css('top', pos.top + 'px'); // move the image 
 
       } 
 
       break; 
 

 
      case 40: // down 
 
       if(pos.top <= theClaw.height() - thePointer.height() - step) { 
 
        pos.top += step; 
 
        thePointer.css('top', pos.top + 'px'); 
 
       } 
 
       break; 
 

 
      case 37: // left 
 
       if(pos.left >= step) { 
 
        pos.left -= step; 
 
        thePointer.css('left', pos.left + 'px'); 
 
       } 
 
       break; 
 

 
      case 39: // right 
 
       if(pos.left <= theClaw.width() - thePointer.width() - step) { 
 
        pos.left += step; 
 
        thePointer.css('left', pos.left + 'px'); 
 
       } 
 
       break; 
 

 
      // let other events through such as typing in textboxes. 
 
      default: 
 
       return; 
 
     } 
 
     
 
     // store the co-ordinates 
 
     x = pos.left; 
 
     y = pos.top; 
 
     console.log(x, y); 
 

 
     // prevent default event, usually page scrolling 
 
     return false; 
 
    }); 
 

 
    $('body').on('keyup', function(e) { 
 

 
     // now check which key was pressed 
 
     switch(e.which) 
 
     { 
 
      case 37: case 38: case 39: case 40: 
 
       alert("Stopped at " + x + ", " + y); 
 
       break; 
 
     } 
 
    }); 
 
})

#claw { 
 
    background-color:yellow; 
 
    border:1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="claw" name='claw' style="overflow:hidden;width:320px;height:240px;position: relative; left: 0; top: 0;"> 
 
    <img id='machine_image' /> 
 
    <img id='pointer' src='http://maps.co.gov/aspnet_client/ESRI/WebADF/MarkerSymbols/circle-black-16x16.png' name='image' style="position: absolute; top: 105px; left: 145px;" /> 
 
</div> 
 

 
<input type="text" placeholder="You can still type in me" />

來源

2014-12-31 13:00:48 Rhumborl

通過點擊方向按鈕在容器內移動圖像？

回答

相關問題