首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用箭头键移动div

如何使用箭头键移动div
EN

Stack Overflow用户
提问于 2011-02-10 05:20:22
回答 3查看 45.6K关注 0票数 18

我想用我的箭头键用jQuery移动一个div。所以向右,向左,向下和向上。

我找到了我想要完成的here的演示

我希望能够在另一个div中移动一个div。

如何做到这一点?

EN

回答 3

Stack Overflow用户

发布于 2013-10-07 23:07:09

@Šime Vidas:你的第一个解决方案太棒了。(我认为第二个是多余的=)

我可以建议将垂直宽度和水平宽度设置为两种不同的函数吗?因为你不太可能在一个完美的正方形中移动一个div,我相信最好能有这样的东西:

代码语言:javascript
复制
$(function () {
var pane = $('#pane'),
box = $('#box'),
wh = pane.width() - box.width(),
wv = pane.height() - box.height(),
d = {},
x = 5;

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

function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return n < 0 ? 0 : n > wv ? wv : 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 newh(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
}, 20);
});

这正是我要找的。

如果您有一个基于%值的响应式设计,建议您像这样调整您的setInterval:

代码语言:javascript
复制
setInterval(function() {
    box.css({
        left: function(i,v) { return newh(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
    wh = pane.width() - box.width();
    wv = pane.height() - box.height();
}, 20);

如果你这样做,它会调整你的窗格的高度和宽度,并且框仍然停留在它的边框上。

我在这里把它弄乱了,http://jsfiddle.net/infidel/JkQrR/1/

非常感谢。

票数 7
EN

Stack Overflow用户

发布于 2011-02-10 06:40:26

我看不到你的demo,但这里有一个简单的“向箭头键方向移动框1px”的例子:

CSS:

代码语言:javascript
复制
#wrapper { 
    background-color: gray; 
    height:200px; 
    width: 200px; 
    position:absolute;
}
#mover { 
    background-color: white; 
    border: 1px solid red;  
    height:20px; 
    width: 20px;
    position:relative;
}

标记:

代码语言:javascript
复制
<div id="wrapper">
    <div id="mover"></div>
</div>

JS (使用jQuery):

代码语言:javascript
复制
$("#wrapper").keydown(function(event) { 
    var $mover = $("#mover");
    //if nothing else will move "mover", then track the 
    //position instead of recalculating it every time:
    //   var moverPos = $mover.position();
    //   var left = moverPos.left;
    //   var top = moverPos.top;
    var addTop = function(diff) {
        $mover.css("top", ($mover.position().top + diff) + "px"); 
        //if using tracked position:
        //   top += diff;
        //   $mover.css("top", top) + "px");
    };

    var addLeft = function(diff) {
        $mover.css("left", ($mover.position().left + diff) + "px");
        //if using tracked position:
        //   left += diff;
        //   $mover.css("left", left) + "px");
    };

    switch(event.keyCode) {
        case 37: //left
            addLeft(-1); break; 
        case 38: //up
            addTop(-1); break;
        case 39: //right
            addLeft(1); break;
        case 40: //down
            addTop(1); break;
    }
});

这只是一个例子,你可能想要添加边界检查,更大的移动,更平滑的动画,数字键盘支持或其他任何数量的东西,但它应该让你开始。

票数 3
EN

Stack Overflow用户

发布于 2017-05-04 22:00:24

尝试此代码

代码语言:javascript
复制
<html>
<head>
     <style>
          #ss{
               background:#ccc;
               height:100px;
               width:100px;
              position: absolute;
              top: 0;
              left: 0;
             }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
</head>
<body>
  <div id="ss"></div>
</body>

<script type="text/javascript">     
var $div = $('#ss');
$(document).keydown(function(e) {
     switch (e.which) {
        case 37:
              $div.css('left', $div.offset().left - 10);
              break;
        case 38:
              $div.css('top', $div.offset().top - 10);
              break;
        case 39:
              $div.css('left', $div.offset().left + 10);
              break;
        case 40:
              $div.css('top', $div.offset().top + 10);
              break;
       }
  })
 </script>

 </html>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4950575

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档