如何使用javascript / jquery将div保留在容器框架内

问题描述 投票：-1回答：4

我有一个简单的（我认为）问题？

我有一个容器800x400，里面是一个div 10x10。里面的div通过按箭头键移动，但我喜欢做的是将div保持在容器的框架内。

$(document).ready(function () {
  go_kw();

});

function go_kw() {
  move_me();
}


function move_me() {
  $(document).on('keydown', function (event) {

    let key = event.which;
    let qt = $('#qw');

    if(key == 37){
      qt.css('left', '-=1');
    }else if(key == 38){
      qt.css('top', '-=1');
    }else if(key == 39){
      qt.css('left', '+=1');
    }else if(key == 40){
      qt.css('top', '+=1');
    }



  });
}
#container {
    position: relative;
    border: 1px solid #000000;
    width: 800px;
    height: 400px;
    margin: 50px auto;
}
#qw {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    background-color: #ff0000;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="container">
  <div id="qw"></div>
</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

我的目标是尽可能地做到这一点。

格尔茨！

javascript jquery
4个回答
0
投票

您可以使用Math.max（选择两个参数的最高值）和Math.min（相反），如此（对于水平移动）：

if(key == 37){
    qt.css('left', Math.max(qt.css('left') - 1, 0));
}
else if(key == 39){
    qt.css('left', Math.min(qt.css('left') + 1, 800));
}
0
投票

在移动parseInt(qt.css('left')) > 0之前，您需要检查是否没有经过div边界

片段：

$(document).ready(function () {
  go_kw();

});

function go_kw() {
  move_me();
}


function move_me() {
  $(document).on('keydown', function (event) {

    let key = event.which;
    let qt = $('#qw');

    if(key == 37 && parseInt(qt.css('left')) > 0){
      qt.css('left', '-=1');
    }else if(key == 38 && parseInt(qt.css('top')) > 0){
      qt.css('top', '-=1');
    }else if(key == 39 && parseInt(qt.css('left')) < 790){
      qt.css('left', '+=1');
    }else if(key == 40 && parseInt(qt.css('top')) < 390){
      qt.css('top', '+=1');
    }



  });
}
#container {
    position: relative;
    border: 1px solid #000000;
    width: 800px;
    height: 400px;
    margin: 50px auto;
}
#qw {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    background-color: #ff0000;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="container">
  <div id="qw"></div>
</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
0
投票

最简单的方法应该是测试左侧和上方的位置是否优于0，分别是右侧和底部的#container宽度和高度。

$(document).ready(function () {
  go_kw();

});

function go_kw() {
  move_me();
}


function move_me() {
  $(document).on('keydown', function (event) {
    
    let key = event.which;
    let qt = $('#qw');

    let maxHeight = $('#container').height();
    let maxWidth = $('#container').width();

    if(key == 37 && qt.position().left > 0){
      qt.css('left', '-=1');
    }else if(key == 38 && qt.position().top > 0){
      qt.css('top', '-=1');
    }else if(key == 39 && qt.position().left < maxWidth){
      qt.css('left', '+=1');
    }else if(key == 40 && qt.position().left < maxHeight){
      qt.css('top', '+=1');
    }



  });
}
#container {
    position: relative;
    border: 1px solid #000000;
    width: 800px;
    height: 400px;
    margin: 50px auto;
}
#qw {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    background-color: #ff0000;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="container">
  <div id="qw"></div>
</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
0
投票

我会创建一个带有left和top值的字段，并在更改期间检查它（我已经使容器变小以便于测试，可以在css中放大）：

$(document).ready(function() {
  go_kw();

});

function go_kw() {
  move_me();
}

var qwWidth = $('#qw').width();
var qwHeight = $('#qw').height();
var maxLeft = $('#container').width() - qwWidth;
var maxTop = $('#container').height() - qwHeight;

var currentPos = {
  left: 0,
  top: 0
};

function move_me() {
  $(document).on('keydown', function(event) {
    let key = event.which;

    if (key == 37) {
      changePos('left', -1, maxLeft);
    } else if (key == 38) {
      changePos('top', -1, maxTop);
    } else if (key == 39) {
      changePos('left', 1, maxLeft);
    } else if (key == 40) {
      changePos('top', 1, maxTop);
    }

    $('#qw').css(currentPos);
  });
}

function changePos(prop, changeVal, maxVal) {
  var newVal = currentPos[prop] + changeVal;

  if (newVal < 0) {
    currentPos[prop] = 0;
  } else if (newVal > maxVal) {
    currentPos[prop] = maxVal;
  } else {
    currentPos[prop] = newVal;
  }
}
#container {
  position: relative;
  border: 1px solid #000000;
  width: 80px;
  height: 40px;
  margin: 50px auto;
}

#qw {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  background-color: #ff0000;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="container">
    <div id="qw"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.