在交互式应用程序中拖放游戏
在交互式应用程序中拖放游戏
提问于 2015-05-11 05:15:57
我对Stack Overflow和javascript都是新手。我被要求创建一款应用程序，这样人们就可以享受学习科学的乐趣。据我所知，我已经提出了一些问题，并使它们可以拖拽。然而，我被困在了让答案可丢弃的问题上。
我已经搜索了几天，寻找一些非常简单的javascript代码，但对于初学者来说，人们发布的一切看起来都太难了。
如果任何人有任何简单的javascript代码可以帮助我的应用程序工作，或者任何有用的提示，那么将不胜感激。
我试着上传我的代码，但它不允许我这样做。我已经把它上传到JSFiddle上了，链接是这样的-
jsfiddle.net/0t9h82vs/ - This just needs to be copied into your URL bar致以亲切的问候和感谢您的帮助！
回答 3
Stack Overflow用户
发布于 2015-05-11 05:53:31
我为你想要的东西做了一个非常简单的版本，下面是你怎么做的：
简单的HTML：
<div class="drag">Drag Me!</div>
<div class="drop">Drop Here!</div>首先，我们首先声明var
var activeE, clicking=false;然后，为.drag添加mousedown事件
$('.drag').mousedown(function(){
activeE=this;//This sets the active element to this
$(this).addClass('dragActive');//Adds the CSS class used
clicking=true;//Sets the clicking variable to true
$('body').addClass('noselect');//Not necessary, it just stops you from selecting text while dragging
});接下来，设置document mouseup函数，以便在拖放元素时重置所有变量：
$(document).mouseup(function(){
clicking=false;//Not that much explaining needed, it just resets everything
$('.dragActive').removeClass('dragActive');
activeE=null;
$('body').removeClass('noselect');
});然后，我们添加一些代码，这样用户就可以看到元素的拖动：
$(document).mousemove(function(e){
if(clicking==true){
var x = e.clientX,y = e.clientY;//jQuery methods, finds the cursors position.
$('.drag').css({top:(y-($('.drag').height()/2)), left:(x-($('.drag').width()/2))});//And this changes the `activeE`'s position in mouse move.
}
});然后是drop函数。非常简单，它只是将activeE附加到.drop
$('.drop').mouseup(function(){
clicking=false;//again, resets.
$(this).append(activeE);//and appends
$('.dragActive').removeClass('dragActive');
$('body').removeClass('noselect');
});然后，一个小的CSS来完成它：
.dragActive{
pointer-events:none;
position:absolute;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:move;
}还有TADA！都完成了！
完整的JS：
$(function(){
var activeE, clicking=false;
$('.drag').mousedown(function(){
activeE=this;
$(this).addClass('dragActive');
clicking=true;
$('body').addClass('noselect');
});
$(document).mouseup(function(){
clicking=false;
$('.dragActive').removeClass('dragActive');
activeE=null;
$('body').removeClass('noselect');
});
$(document).mousemove(function(e){
if(clicking==true){
var x = e.clientX,
y = e.clientY;
$('.drag').css({top:(y-($('.drag').height()/2)), left:(x-($('.drag').width()/2))});
}
});
$('.drop').mouseup(function(){
clicking=false;
$(this).append(activeE);
$('.dragActive').removeClass('dragActive');
$('body').removeClass('noselect');
});
});和CSS：
.drag{
background:pink;
padding:5px;
border-radius:5px;
width:100px;
cursor:move;
}
.dragActive{
pointer-events:none;
position:absolute;
}
.drop{
width:500px;
height:500px;
border:1px solid red;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:move;
}Don't Forget The JSFiddle!!!
Stack Overflow用户
发布于 2015-05-11 05:23:48
使用像这样的自定义J查询库。
http://jqueryui.com/demos/draggable/
这就是实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>Stack Overflow用户
发布于 2015-05-11 06:02:23
function dragDiv(event, div){
// Drag set to false
var drag = false;
// Mouse down event listener
div.addEventListener("mousedown", function( event ) {
// If mouse is down, drag is set to true
drag = true;
// Gets location of the div
var top = event.clientY - div.style.top;
var left = event.clientX - div.style.left;
// Adds mouse move event listener to the body
document.body.addEventListener("mousemove", function( event ) {
// If mouse is down
if(drag){
// Move the div with mouse
div.style.top = event.clientY - top;
div.style.left = event.clientX - left;
}
}, false);
// Add mouse up event listener
div.addEventListener("mouseup", function( event ) {
// If mouse is released, drag is set to false
drag = false;
}, false);
}, false);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30156751
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号