0

現在、キーダウンで移動可能な div を作成しようとしています。Jqueryを使用してkeydown関数を機能させることができました。ただし、divが移動できず、回避する必要があるバリアを作成したいと思います。

div のミニマップのようなものです。

私は JSfiddle を使用して自分のコードをテストしています。

http://jsfiddle.net/bDMnX/828/

HTML:

<div id="pane">
    <div id="barrier"></div>
    <div id="box"></div>
</div>

CSS:

#pane {
    position:relative;
    width:300px; height:300px;
    border:2px solid red;
}

#box {
    position:absolute; top:140px; left:140px;
    width:20px; height:20px;          
    background-color:black;
}
#barrier{
    position:absolute; top:50px; left:50px;
    width:50px; height:50px;          
    background-color:grey; 
}

JS:

var pane = $('#pane'),
    box = $('#box'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

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

私はこれに最適な方法を使用していない可能性があり、このコードを改善または改善する方法についてフィードバックをお待ちしています。

#box div が #barrier に触れたり越えたりするのを止めたいと思います。

前もって感謝します。

4

1 に答える 1

0

マウスと矢印キーを使用して小さな div をドラッグできるようにするコードを作成しました。HTML と CSS にも小さな変更を加えました。

このスクリプトもヘッド部分に含める必要があります。

依存関係:

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

HTML:

<div id="pane">
     <div id="barrier"><div id="box"></div></div>    
</div>

CSS:

 #pane {
        position:relative;
        width:300px; height:300px;
        border:2px solid red;
 }    
 #box {
       width:20px; height:20px;          
       background-color:black;
 }
 #barrier{
      position:relative; top:50px; left:50px;
      width:50px; height:50px;          
      background-color:grey; 
 }

JS:

    $(function(){
            var pane = $('#pane'),
            box = $('#box'),
            barrier = $('#barrier'),
            distance = 1,
            position;
            $( "#box" ).draggable({ 
                containment: "#barrier", 
                scroll: false
            });
            $(window).on('keypress', function(e){
                position = box.position();
                switch (e.keyCode) {
                    case 37: position.left -= distance; break; // Left
                    case 38: position.top  -= distance; break; // Up
                    case 39: position.left += distance; break; // Right
                    case 40: position.top  += distance; break; // Down
                    default: return true; // Exit and bubble
                }
                // Keep draggable within container
                if (position.left >= 0 && position.top >= 0 &&
                    position.left + box.width() <= barrier.width() &&
                    position.top + box.height() <= barrier.height()) {
                    box.css(position);
                }
            });
        });

注: 矢印キーを使用してテストしている間は、必ずページをクリックして矢印で遊んでください。

于 2013-11-06T18:46:29.613 に答える