To Wrap All The Elements and drag by arrow key in jQuery
<p>I have to drag some selected divs by arrow key. By the example given i have done that one div can be move by arrow key.that is like that</p>

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

<p>but when some divs are selected. the function is not working correctly means every divs are moves to one place (the first div place) then it moves at the direction of arrow key. what is the way to get it.plz hel me.
here is my HTML code..</p>

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

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

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

<p>and the css for the code is using jQuery. means every div is draggable and make clone of each of them at a another div area where there offset are calculate by jQuery.</p>
