jQuery의 모든 요소를 ​​감싸고 화살표 키로 드래그

Question

화살표 키로 선택된 div를 드래그해야합니다. 주어진 예를 통해 내가 한 div가 화살표 키로 움직일 수 있다는 것을 알았습니다. 그 것과 같습니다

$(document).keydown(function(e) { 
    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; 
    } 
}) 

일부 div가 선택된 경우입니다. 함수가 올바르게 작동하지 않는다는 것을 의미합니다. 모든 div가 한 위치 (첫 번째 div 위치)로 이동하면 화살표 키 방향으로 이동합니다. 그것을 얻는 방법은 무엇입니까 .plz hel me. 여기 .. ​​내 HTML 코드

<div class="widgets widgets-leftside"> <!--el->element selectbox-el-state/selectbox-el-active-state --> 
    <div class="item-art submitbutton-button-state round-border box-shadow sub-btn"> 
     <span class="submitbuttonitem-label item-label">Button</span> 
    </div> 
    <div class="item-art-label" id="button-label">Button</div> 
    </div> 

<div class="widgets widgets-rightside oTextInput "> <!--el->element selectbox-el-state/selectbox-el-active-state --> 
    <div class="item-art textarea-button-state rectangle-border box-shadow text-area"> 
     <div class="textareaitem-label item-label">Text<br />Area </div> 
    </div> 
    <div class="item-art-label">Text Area</div> 
    </div> 

    <div class="widgets widgets-leftside"> <!--el->element selectbox-el-state/selectbox-el-active-state --> 
    <div class="radiobutton item-art radio-btn"> 
     <div class="radiobutton-button-state round-border box-shadow"> 
     <div class="radiobuttonsub-button-state"></div> 
     </div> 
     <div class="radiobuttonitem-label item-label"><span class= "radio-bottom">RadioButton1</span> </div> 
    </div> 
    <div class="radiobuttonname">Radio Button</div> 
    </div> 

및 코드에 대한 CSS는 jQuery를 사용하고 있습니다. 모든 div가 드래그 가능하다는 것을 의미하고 jQuery에 의해 오프셋이 계산되는 다른 div 영역에서 각각의 복제본을 만듭니다.

Answer 1

<div></div> 
    <div class="draggable"></div> 
    <div></div> 
    <div class="draggable"></div> 

"draggable"클래스를 기본 div에 추가하고 시도해야합니다.

$(document).ready(function(){ 
    $('div.draggable').click(function(){ 
    $(this).addClass('selected'); 
}); 
}); 

$(document).mouseup(function(e) { 
     $('div.draggable').removeClass('selected'); 
    }); 

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