So I have only been learning html/css/javascript for a few months now and I can't seem to get drag and drop to work with html5/javascript. I'm not actually making a website or anything I'm just trying to learn and I have got html elements to become draggable with jQuery I just can't seem to get it to work with html5/javascript.
My html code is as followed:
<DOCTYPE html>
<html>
<body>
<img id="steam" src="http://www.omgubuntu.co.uk/wp-content/uploads/2012/07/Steam_Logo.png" draggable="true" ondragstart="drag(event)" />
<div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div>
</body>
</html>
My css code is as followed:
#div1 {
width:350px;
height:350px;
border:2px solid #AA560B;
}
My javascript is as followed:
window.onload = function(){
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
}
I'm not entirely sure what I'm doing wrong. Any help would be greatly appreciated.
You have a typo in your HTML, your function in HTML is not camelCase like in Javascript.
This line:
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
Change allowdrop to allowDrop.
fiddle: http://jsfiddle.net/U55rc/
You now have a problem with positioning because the box will automatically snap to top without the Steam logo there, but that's another problem entirely.
I'm using Angular and I had to include the drag and drop functions in my tag inside index.html. This helped me.
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
Related
I want to move an html element inside a web page, but all the examples I can find are related to move an element to another element:
event.target.appendChild(document.getElementById(data));
I can't find a way to move an element on an empty web page (I don't want to use divs since I want to create a workflow generator)
This is the code from w3schools, I removed the information not needed, this code has 2 divs and a paragraph element, and you can drag the <p> between both divs, but not outside them, which is what I want to do, any suggestion will be well appreciated:
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
//this is what I don't want to do, I want to move the paragraph freely
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
It sounds like what you want is demonstrated by the jquery draggable support - demo here of moving a rectangle around in a box: https://jqueryui.com/draggable/
Then make your body droppable:
<body class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
or just nest everything in a div:
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
... all the rest comes here
</div>
</body>
So far I have managed to implement a simple drag and drop feature. It allows the user to drag the image from one div into another div. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title> The New Dashboard </title>
<style>
#div1 {width:1000px;height:500px;padding:10px;border:1px solid #aaaaaa;}
#top {width:1000px;height:100px;padding:10px;border:1px solid #aaaaaa}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id = "top" ondrop="drop(event)" ondragover="allowDrop(event">
<img id = "drag1" src="slwheel.png" draggable="true" ondragstart="drag(event)">
</div>
<div id = "div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
So now I want to drag the slwheel image from its new location in the #div1 div back into the #top div, but it does not let me do so. What am I doing wrong? Any help can be appreciated. Thanks!
In top div you miss ) in allowDrop(event)
There was a missing ) in the "top" div that would not make my code work. Complete rookie mistake. My sincerest apologies.
I would like some help to improve the following. How can I get a an incorrect dropped answer to be shown in red or green if it is correct. This is gap filling Drag & Drop exercise for my language students.
Below is the simple code I am using:
<!DOCTYPE HTML>
<html>
<head>
<style>
.draggable {
width: 120px;
padding: 1px;
border: 1px solid gray;
margin: 0px;
text-align:center;
}
#div1,#div2
{display:inline-block;min-width:150px;min-height:10px;
border-style:solid;border-width:0px;border-bottom-width:2px;}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.parentNode.replaceChild(document.getElementById(data), ev.target);
document.getElementById(data).className = "";
}
</script>
</head>
<body>
<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">
HEART TO HEART</span>
<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">
EYE TO EYE</span>
<br />
<ol>
<li>Our relationship was going badly wrong, but after we sat down and had a
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> talk we
decided to try again. We're a lot happier now.
</l7>
<li>I wish my wife and my sister could agree about some things. The problem is that
they just can't see <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div> and argue about everything.
</li>
</ol>
</body>
</html>
If you set the loading option in JSFiddle to "No wrap - in <head>" then the drag and drop will work. Please use the console to diagnose your issues and include any errors in your post.
It appears that you were following this tutorial on http://www.w3schools.com/html/html5_draganddrop.asp which is not the place to be learning web development as they are not endorsed/affiliated by W3.
The following DEMO should function properly. I tested this out on Chrome.
I made a simple change to the drag() function:
function drag(ev) {
ev.target.innerHTML += ' '; // Add space so that there is no keming...
ev.dataTransfer.setData("Text", ev.target.id);
}
The idea is like this:
You hear a sound then you have to drag and drop the right image into the box. I want to use this to teach my daughter about animals, and for myself, I want to learn more about these features.
I really hope someone can help me out. Much thanks for your time.
Here is the code:
<html>
<head>
<style type="text/css">
#div1 {width:200px;height:158px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Jamila sleep het juiste diertje naar de vierkant</p>
<audio????
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="eend.jpg" draggable="true" ondragstart="drag(event)" width="200" height="158">
<img id="drag2" src="tigr.jpg" draggable="true" ondragstart="drag(event)" width="200" height="158">
Yours sincerly,
Orhan
I am using the following code to drag images into an area of the screen. I want to know, is there a code that I can use to send the image back to its original location, or at least back to its original div. I need to do this, because after a certain time (lets just say 100s) I need a particular image to go back. So lets say I drag both images into the area, after 100s I want the first image back to its original location
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="img_logo2.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>