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位置）然后它按箭头键的方向移动。什么是获得它的方式。请帮助我。这是我的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都是可拖动的，并在另一个div区域中克隆每个div，其中偏移量由jQuery计算。

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

包装所有元素并在jQuery中按箭头键拖动

1 个答案: