Javascript - Jquery Move Div Keydown Barrier
Javascript - Jquery Move Div Keydown Barrier
我目前正在尝试在按键上创建一个可移动的div。我已经设法使用 Jquery 使用键控函数。但是,我想创建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);
我可能没有为此使用最佳方法,并且愿意接受有关改进或改进此代码的方法的反馈。
我希望能够阻止 #boxdiv触摸/越过 #barrier。
提前谢谢你。
我写了一个代码,允许您使用鼠标和箭头键拖动小div。在HTML和CSS中也做了一些小的更改。
您还需要将此脚本包含在 head 部分中:
依赖:
<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);
}
});
});
注意:使用箭头键进行测试时,请确保单击页面并使用箭头播放。
相关文章:
- 使用特定键在keydown时触发事件
- 使用regex的jquery keydown绑定不会验证撇号和句点
- JQuery.on(“keydown”)追加到页面时不工作
- KeyPress和Keydown在这个特定的代码上不起作用.只有key-up起作用
- 阻止浏览器对keydown事件作出反应,但不取消该事件
- KeyDown event for CKeditor
- 在keydown(JS,Jquery)上更改HTML5 Canvas元素
- 如何修复javascript keydown中的延迟
- IE9-添加和删除DOM元素会破坏父keydown事件
- JavaScript-在keyDown上切换css样式
- 在文本区域禁用javascript定义的keydown事件并恢复默认行为
- 在Chrome中模拟keydown事件
- 使用Keydown事件移动对象
- Keydown/Keyup被呼叫7次
- 如何收听骨干事件方法上的keydown
- KeyDown不会'按住时不能连续开火
- 如何在不干扰网站其他部分的情况下,在画布上捕捉keydown事件
- 使用jQuery和JavaScript函数进行Keydown
- HTML jQuery 函数在 Keydown 事件上不起作用
- Javascript - Jquery Move Div Keydown Barrier