Keydown 함수를 사용하여 이미지를 클릭하는 방법()

Question

div 위로 이동하는 이미지가 있습니다. 각 div를 클릭 한 후에 호출되는 메서드가 있습니다. 이미지를 이동 한 후에 이미지를 마우스로 움직이게 만드는 방법은 무엇입니까? 내 코드 :

if (e.keyCode == 39) { 
    $("#img").animate({marginLeft: "+=107px"}, {queue:false}, "slow"); 
    return false; 
} 

(39) 올바른 방향으로 이동. 오른쪽 키보드 버튼을 클릭하면 이미지가 오른쪽 (완료)으로 이동 한 다음 마우스를 클릭하여 이미지의 가운데에있는 div를 클릭하십시오. 나는 이미지가 끝난 따라서 캔트 $(#...)

이미지가 비록 약수를 통해 완벽하게 이동 해당되는 제수 모르기 때문에

은 내가 trigger() 및 click() 기능을 사용하지 못할. 이 div의 중 하나 이상

<div id="Blocks"> 
      <div id="41" class="square" ></div> 
      <div id ="42" class="square" ></div> 
      <div id ="43" class="square" ></div> 
      <div id ="44" class="square" ></div> 
     </div> 
     <div id ="Blocks2"> 
      <div id ="31" class="square"></div> 
      <div id ="32" class="square"></div> 
      <div id ="33" class="square"></div> 
      <div id ="34" class="square"></div> 
     </div> 
     <div id ="Blocks3"> 
      <div id ="21" class="square"></div> 
      <div id ="22" class="square"></div> 
      <div id ="23" class="square"></div> 
      <div id ="24" class="square"></div> 
     </div> 
     <div id ="Blocks4"> 
      <div id ="11" class="square" ></div> 
      <div id ="12" class="square"></div> 
      <div id ="13" class="square"></div> 
      <div id ="14" class="square"></div> 
     </div> 

이미지 이동, (높은 Z- 인덱스)가

Answer 1

1 클릭은 항상 최상위 사업부에 등록되어있는 사업부 ID를 통해 알 이벤트를 발생합니다 그것은 커서 아래에 있습니다.
* "뒤"를 클릭 할 수 없습니다.
2 - "이미지가 끝나고 그에 상응하는 $ (# ...)"이 (가) 어림짐작하기 때문에 "
은 거짓입니다. 현재 위치 때문에 : 당신은 (좌표 =) 당신이 당신의 div의 오프셋을 알 수 * 커서가
좌표를 알고 *

Proof: there's a plugin for that

Answer 2

JQuery와 animate() 기능 (http://api.jquery.com/animate/)를 사용하는 당신을 가정하면, 정의 할 수 있습니다 0에서 호출 할 함수(애니메이션이 끝나면).

여기에 실제 예제가 있습니다 (정말 거친 방법입니다. 확실히 사용할 방법이 아니며 다양한 방법으로 개선 될 수 있습니다.) CSS 위치에 의존하지 않고 div 매트릭스에 대한 지식을 사용하는 것이 좋습니다 data 개체 사용을 더 자세히 설명합니다. 프로그래밍 방식으로 하드 코드 된 치수를 너비/높이로 바꿉니다. 쉽게 관리 할 수 ​​있기 때문에

또한

스크롤 코드의 끝을 아래로 (귀하의 예는 현재 사용자가 연속으로 빠르게 여러 번 키를 명중하는 경우 문제가) queue: true를 사용하는 대신 false 추천 최상의 결과를 얻으려면 "Run Snippet"을 클릭하고 "Full page"를 클릭하십시오. complete 기능에

$(document.body).on("keydown", function(e) { 
 
    if (e.keyCode > 36 && e.keyCode < 41) { 
 
    var $img = $("#img"); 
 
    var dir = e.keyCode === 37 || e.keyCode === 38 ? -1 : 1 
 
    var axis = e.keyCode === 38 || e.keyCode === 40 ? "top" : "left"; 
 
    var data = $img.data("goal"); // used to restrict movement at bounds 
 

 
    if (!data) { 
 
     data = { 
 
     left: 0, 
 
     top: 0 
 
     }; 
 
     $img.data("goal", data); 
 
    } 
 

 
    var pos = (axis === "left" ? data.left : data.top); 
 
    if ((dir > 0 && pos < 180) || (dir < 0 && pos > 0)) { 
 
     var moveAmt = 60 * dir; 
 
     if (axis === "left") { 
 
     data = { 
 
      left: data.left + moveAmt, 
 
      top: data.top 
 
     }; 
 
     } else { 
 
     data = { 
 
      top: data.top + moveAmt, 
 
      left: data.left 
 
     }; 
 
     } 
 
     $img.data("goal", data); 
 
     var moveCmd = {}; 
 
     moveCmd[axis] = "+=" + moveAmt + "px"; 
 
     $img.animate(moveCmd, { 
 
     queue: true, // easier to manage than 'false' 
 
     speed: "slow", 
 
     easing: "swing", 
 
     complete: function() { 
 
      // this function is called when animation completes 
 
      $(this).addClass("moved"); 
 
      // get number; from http://stackoverflow.com/questions/1100503/how-to-get-just-numeric-part-of-css-property-with-jquery 
 
      var imgLeft = +($(this).css('left').replace(/[^-\d\.]/g, '')); // coerce to number 
 
      var imgTop = +($(this).css('top').replace(/[^-\d\.]/g, '')); // coerce to number 
 
      $(".square").each(function() { 
 
      var offset = $(this).offset(); 
 
      if (offset.left === imgLeft && offset.top === imgTop) { 
 
       var fromKeyboard = true; 
 
       $(this).trigger("click", [fromKeyboard]); 
 
       return false; 
 
      } 
 
      }); 
 
     } 
 
     }); 
 
    } 
 
    return false; 
 
    } 
 
}); 
 

 
$(".square").on("click", function(e, fromKeyboard) { 
 
    var str = "Clicked " + this.id; 
 
    if (fromKeyboard) { 
 
    str += " (FROM KEYBOARD)"; 
 
    } 
 
    $("#feedback").html(str); 
 
});

BODY { 
 
    margin: 0; 
 
} 
 
DIV { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#img { 
 
    position: absolute; 
 
    border: 5px solid Red; 
 
    background-color: Blue; 
 
    width: 50px; 
 
    height: 50px; 
 
    z-index: 101; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
#img.moved { 
 
    background-color: Orange; 
 
} 
 
.square { 
 
    margin: 0; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #eee; 
 
    border: 5px solid #666; 
 
} 
 
.row { 
 
    font-size: 0; 
 
} 
 
#feedback { 
 
    padding: 10px; 
 
    color: #666; 
 
    font-family: 'Segoe UI', Arial, Sans-serif; 
 
    font-size: 14px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="img"></div> 
 
<div id="Blocks" class="row"> 
 
    <div id="41" class="square"></div> 
 
    <div id="42" class="square"></div> 
 
    <div id="43" class="square"></div> 
 
    <div id="44" class="square"></div> 
 
</div> 
 
<div id="Blocks2" class="row"> 
 
    <div id="31" class="square"></div> 
 
    <div id="32" class="square"></div> 
 
    <div id="33" class="square"></div> 
 
    <div id="34" class="square"></div> 
 
</div> 
 
<div id="Blocks3" class="row"> 
 
    <div id="21" class="square"></div> 
 
    <div id="22" class="square"></div> 
 
    <div id="23" class="square"></div> 
 
    <div id="24" class="square"></div> 
 
</div> 
 
<div id="Blocks4" class="row"> 
 
    <div id="11" class="square"></div> 
 
    <div id="12" class="square"></div> 
 
    <div id="13" class="square"></div> 
 
    <div id="14" class="square"></div> 
 
</div> 
 
<div id="feedback">Click into the document area and then hit the ARROW keys</div>

당신은 마우스 클릭을 시뮬레이션을위한 코드를 넣을 수 있습니다. #img의 크기와 div 및 해당 위치를 알고있는 경우 충돌 감지 논리를 사용하여 클릭 할 항목을 파악한 다음 대상 요소에서 click 이벤트를 발생시키는 간단한 문제 일 수 있습니다.

우리가 당신을 도울 수 있기 전에 이러한 DIVS와 #img를 보여주는 마크 업을 게시해야합니다.