Drag and drop games in an interactive app
I am new to both Stack Overflow and javascript. I was asked to create an application so that people can enjoy the science of science. As far as I know, I had questions and I made them drag and drop. I am dwelling on the fact that answers may not be available.
I've been looking for days looking for some really simple javascript code that might help, but everything people have posted looks too complicated for beginners.
If anyone has some simple javascript code that can help my application work or any helpful advice then it will be very helpful.
I tried uploading my code, but that prevents me from doing it. I was able to upload it to the JSFiddle and here's the link -
jsfiddle.net/0t9h82vs/ - This just needs to be copied into your URL bar
Best regards and thank you for your help!
source to share
I made a very simplified version of what you want, this is how you can do it:
Simple HTML:
<div class="drag">Drag Me!</div>
<div class="drop">Drop Here!</div>
First of all, we start by declaring var
:
var activeE, clicking=false;
Then add an event mousedown
for .drag
:
$('.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
});
Then you set the document function mouseup
to reset all variables when the element is dropped:
$(document).mouseup(function(){
clicking=false;//Not that much explaining needed, it just resets everything
$('.dragActive').removeClass('dragActive');
activeE=null;
$('body').removeClass('noselect');
});
Then let's add some code so the user can see the movement of the element:
$(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` position in mouse move.
}
});
And then, the drop function. very simple, it just adds activeE
to .drop
:
$('.drop').mouseup(function(){
clicking=false;//again, resets.
$(this).append(activeE);//and appends
$('.dragActive').removeClass('dragActive');
$('body').removeClass('noselect');
});
And then, some CSS to finish it off:
.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;
}
AND TADA! all is ready!
End 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');
});
});
And the 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 !!!
source to share
Use a regular J Query library like this.
http://jqueryui.com/demos/draggable/
This is the implementation.
<!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>
source to share
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);
};
source to share