%로 화살표 키를 사용하여 div를 이동하는 방법

Question

다른 질문 here on stackoverflow에서이 스크립트를 얻었으며 완벽하게 작동합니다. 이 스크립트는 px의 요소를 업데이트합니다. 예를 들어 왼쪽 화살표 키를 누른 상태에서 대각선 방향으로 요소를 이동할 수있는 방법을 특히 좋아합니다.

내 질문은 : 이제 % 값으로 요소의 값을 설정하고 업데이트하도록 스크립트를 변경할 수 있습니까?

이유는 내가 반응 형 디자인으로 사이트를 개발하고 있으며 창 크기에 비례하여 페이지에서 머물러 있어야한다는 것입니다. 나는 그것을 알아 내기 위해 노력했지만 지금까지는 성공하지 못했다. 여기

스크립트입니다 :

HTML

<div id="pane"> 
    <div id="box"></div> 
</div> 

CSS

#pane { 
    position:relative; 
    width:300px; height:300px; 
    border:2px solid red; 
} 

#box { 
    position:absolute; top:140px; left:140px; 
    width:20px; height:20px;   
    background-color:black; 
} 

자바 스크립트

var pane = $('#pane'), 
    box = $('#box'), 
    w = pane.width() - box.width(), 
    d = {}, 
    x = 3; 

function newv(v,a,b) { 
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); 
    return n < 0 ? 0 : n > w ? w : n; 
} 

$(window).keydown(function(e) { d[e.which] = true; }); 
$(window).keyup(function(e) { d[e.which] = false; }); 

setInterval(function() { 
    box.css({ 
     left: function(i,v) { return newv(v, 37, 39); }, //Function should set values in % 
     top: function(i,v) { return newv(v, 38, 40); } //here for left and top 
    }); 
}, 20); 

COFFE 스크립트

jQuery ->  
    pane = $('body') 
    box = $('.myDiv') 
    w = pane.width() - box.width() 
    c = [37,38,39,40] # Set key values for arrow keys in an array 
    d = [] 
    x = 4 

    newv = (v,a,b) -> 
     n = parseInt(v, 10) - (if d[a] then x else 0) + (if d[b] then x else 0) 
     if n < 0 then 0 else if n > w then w else n 

    $(window).keydown((e) -> 
     d[e.which] = true 
    ) 

    $(window).keyup((e) -> 
     d[e.which] = false 
     if true not in d and e.which in C#Check that all arrow keys are released 

     divID = $('.myDiv').attr('id') # Grab values from the element 
     top = $('.myDiv').css('top') 
     left = $('.myDiv').css('left') 

     setTimeout -> #Set a timeout and then send element values with Ajax to database to preserve state of element for next time window is opened 
      $.ajax(
       type: "PUT" 
       url: "/url/to/update/database" 
       data: 
        positiontop: top 
        positionleft: left 
      ) 
      ,1000 
     ) 

    setInterval -> 
     box.css 
      left: (i,v) -> 
       newv(v, 37, 39) 
      top: (i,v) -> 
       newv(v, 38, 40) 
    ,40 

Answer 1

좋아,이게 내가 한 일이야. 아마도 코드를 좀 더 효율적으로 만들 수있는 약간의 조정을 사용할 수 있으며, 백분율을 더 부드럽게 이동시키기 위해 백분율 계산 값에 소수점 하나를 사용하게 할 수도 있습니다.

나는 파이어 폭스와 오페라 하나의 문제로 실행 다음 하여 setInterval 기능에서 V 값은 픽셀 단위로 반환됩니다. 그래서 v = box [0] .style.left 및 v = box [0] .style.top을 추가하면 모든 브라우저에서 값이 백분율로 반환됩니다.

브라우저 창이 항상 사각형이 아니기 때문에 폭과 높이를 별도로 계산하는 또 다른 기능을 추가했습니다.

자바 스크립트

var pane = $(window), 
    box = $('#box'), 
    w = (pane.width() - box.width())/pane.width()*100, 
    h = (pane.height() - box.height())/pane.height()*100, 
    d = {}, 
    x = 1; 

//Caclulate height movement and window height bounds in % 
function newvHeight(v,a,b) { 
    v = box[0].style.top //Grab :top value of the #box div as % in all browsers 
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); 
    return (n < 0 ? 0 : n > h ? h : n) + '%'; 
} 

//Calculate width movement and window width bounds in % 
function newvWidth(v,a,b) { 
    v = box[0].style.left //Grab :left value of the #box div as % in all browsers 
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); 
    return (n < 0 ? 0 : n > w ? w : n) + '%'; 
} 

$(window).keydown(function(e) { d[e.which] = true; }); 
$(window).keyup(function(e) { d[e.which] = false; }); 

setInterval(function() { 
    box.css({ 
     left: function(i,v) { return newvWidth(v, 37, 39); }, //Function should set values in % 
     top: function(i,v) { return newvHeight(v, 38, 40); } //here for left and top 
    }); 
}, 20); 

Answer 2

귀하의 의견에 따라 올바른 길을 걷고 있습니다. 그의 코드가 무엇을하는지 알아 내야합니다. 그는 익숙하지 않은 ternary operators을 사용하고 있습니다. 나는 그의 반환 가변 선을 그것을 설명하는 것을 돕기 위해 사용할 것이다.

return n < 0 ? 0 : n > w ? w : n; 

이것은 0보다 작거나 상자 너비보다 큰 경우 n을 반환합니다. 그렇지 않으면 우리가 경계에 있기 때문에 그것을 내버려둬 라. 귀하의 경우에는 n > 0 or < 100을 돌려 주길 원할 것입니다. 그런 다음 px 대신 %로 환산하여 변경해야합니다. 당신은 '%'를 추가함으로써 그렇게한다.

http://jsfiddle.net/bDMnX/332/

w = 100; //pane.width() - box.width(), 

function newv(v,a,b) { 
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); 
    //console.log((n < 0 ? 0 : n > w ? w : n) + '%'); 
    return (n < 0 ? 0 : n > w ? w : n) + '%'; 
} 

내가 경계를 받고 당신까지 증가 떠나

.