2

私はこの出力を行っていますが、すでに望んでいたように実行されています。これは、div矢印キーを使用して移動するようなものですが、私の問題は、矢印キーを押して移動すると、灰色divが独自の親を超えてしまうことdivです。私が達成したいのは、矢印キーを押し続けても、灰色divがその親 (赤い境界線を持つ) の外に出ることができないということです。div

これはデモjsFiddle です

何か助けはありますか？

4

4 に答える 4

3

コードを次のように変更します

$(function(){
    var spaceship = $('<div id="spaceshipContainer"/>'); // store reference to actual jQuery object
    var cS = $('#centerSpace').append(spaceship);
    var limits = {width: cS.width()-spaceship.width() , height:cS.height()-spaceship.height()}; // pre-calculate the limits

    $(document).keypress(function(e){
        var position = $('#spaceshipContainer').position();


        switch(e.keyCode){

            case 37:
                position.left -= 10;
                break;
            case 38:
                position.top -= 10;
                break;
            case 39:
                position.left += 10;
                break;
            case 40:
                position.top += 10;
                break;
        }

        position.left = Math.max(Math.min(position.left, limits.width),0); // enforce horizontal limits
        position.top = Math.max(Math.min(position.top, limits.height),0); // enforce vertical limits

        spaceship.css({left:position.left, top:position.top});
    });
});

またposition:relative、#centerSpace

http://jsfiddle.net/4bpgp/17/のデモ

于 2012-10-04T15:09:52.977 に答える
0

キープレス コールバックで、次のようなロジックを追加するだけです。

var $ship = $('#spaceshipContainer');

if ($ship.offset().top < $ship.parent().offset().top) {
    return false;
}
// repeat for left, right, bottom

offsetx/y 座標がドキュメントに対して相対的になるように選択しました。

于 2012-10-04T15:06:59.120 に答える
0

jQueryでドラッグ可能を使用しないのはなぜですか?

于 2012-10-04T15:05:09.847 に答える
0

コンテナーの位置を取得し、灰色のボックスの位置がそれを超えていないことを確認できます。

これがjsFiddleの動作例です。

$(function(){
var spaceship = '<div id="spaceshipContainer"></div>';
$('#centerSpace').append(spaceship);
var parent_position = $('#centerSpace').position();
var parent_right = parent_position.left + $('#centerSpace').width() -$('#spaceshipContainer').width();
var parent_buttom= parent_position.top + $('#centerSpace').height()-$('#spaceshipContainer').height();
$(document).keypress(function(e){

    var position = $('#spaceshipContainer').position();

    switch(e.keyCode){

        case 37:

            if( position.left - 10 >= parent_position.left)
                $('#spaceshipContainer').css('left', position.left - 10 + 'px');
            break;
        case 38:
            if( position.top - 10 >= parent_position.top)
            $('#spaceshipContainer').css('top', position.top - 10 + 'px');
            break;
        case 39:
            if( position.left  <= parent_right)
            $('#spaceshipContainer').css('left', position.left + 10 + 'px');
            break;
        case 40:
            if( position.top<= parent_buttom)
            $('#spaceshipContainer').css('top', position.top + 10 + 'px');
            break;
    }
 });
});
于 2012-10-04T15:05:26.680 に答える