jQueryで要素をすべてラップして矢印キーでドラッグ

Question

矢印キーで選択したdivをドラッグする必要があります。私が与えた例では、1つの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が1つの場所（最初の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エリアで、各divのクローンを作成します。

Answer 1

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

メインのdivにクラス「draggable」を追加して試してください。

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