방향 버튼을 클릭하여 컨테이너 안의 이미지를 이동 하시겠습니까?

Question

컨테이너 내에 이미지가 있습니다.. 내 요구 사항은 컨테이너 내부의 이미지를 이동하고 좌표를 가져 오는 것입니다. 이전에는 이것을 실현하기 위해이라는 draggable 함수를 사용했습니다.

그러나 지금은 화살표 키을 사용하여 동일한 동작을 원합니다. 도와주세요. 감사.

내 앞의 코드

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; 
    } 
}); 

Answer 1

이을 드래그하지 있다 - 당신은 keydown 이벤트를 수신하고 이미지를 직접 이동 처리해야합니다. 이것은 jQuery에서 그리 어렵지 않습니다.

기본적으로 화살표 키를 눌렀는지 확인하고 이동이 컨테이너 외부로 이동하지 않는지 확인한 다음 (원하는 경우) 이미지를 이동하고 새 좌표를 저장하십시오. 키를 누르고 있으면 반복적으로 keydown 이벤트가 호출되며 이미지는 계속 이동합니다.

// 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" />