[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –
HTML5 Tutorial – 46 – Finishing the Drag and Drop Program!
by
Tags:
Comments
33 responses to “HTML5 Tutorial – 46 – Finishing the Drag and Drop Program!”
-
Thank you very much 🙂
-
I'm following this tutorial and all it's working for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1"/>
<!– HTML5 Tutorial – 46 – Finishing the Drag and Drop Program –>
<title>Finishing the Drag and Drop Program</title>
<script type="text/javascript" src="tutorial46.js"></script>
<link rel="stylesheet" href="main46.css"></head>
<body style="background-color: #8EE5EE">
<section id="leftbox">
I dare you to drag an image in me!
</section><section id="rightbox">
<img id="robson-picture" src="../images/robson.jpg">
</section></body>
</html>function doFirst(){
var mypic = document.getElementById("robson-picture");
mypic.addEventListener("dragstart", startDrag, false);leftbox = document.getElementById("leftbox");
leftbox.addEventListener("dragenter", function(event){event.preventDefault();}, false);
leftbox.addEventListener("dragover", function(event){event.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}function startDrag(event){
var code = '<img id="robson-picture" src="../images/robson.jpg">';
event.dataTransfer.setData('Text', code);
}function dropped(event){
event.preventDefault();
leftbox.innerHTML = event.dataTransfer.getData('Text');}
window.addEventListener("load", doFirst, false);
@CHARSET "ISO-8859-1";
#leftbox{
float: left;
width: 400px;
height: 400px;
margin: 5px;
border: 3px solid blue;
}#rightbox{
float: left;
width: 400px;
height: 400px;
margin: 5px;
border: 3px solid red;
} -
My code doesn't work for some reason.
function doFirst() {
myPic = document.getElementById("facepic");
myPic.addEventListener("dragstart", startDrag, false);
leftbox = document.getElementById("leftbox");
leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
function startDrag(e) {
var code = '<img src="cartoon_monkey.ico">';
e.dataTransfer.setData('Text', code);
}
function dropped(e) {
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
}
window.addEventListener("load", doFirst, false); -
I keep getting the error "data:text/html,chromewebdata:1 Not allowed to load local resource: " when i upload the JavaScript to google chrome. Any suggestions?
-
Can anyone give me the source link of this tutorial ?
-
Using the exactly same code as you do, I can drag image, but it doesn't show itself in the leftbox :/
function doFirst() {
myPic = document.getElementById("facepic");
myPic.addEventListener("dragstart", startDrag, false);
leftbox = document.getElementById("leftbox");
leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);}
function startDrag(e) {
var code = '<img id = "facepic" src = "images/sebastian.jpg" width = "150" height = "100"';
e.dataTransfer.setData('Text', code);}
function dropped(e) {
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');}
window.addEventListener("load", doFirst, false);
-
The code still works and thanks to Paul Pantiru. Please watch out for the use of capitals!
If you have problems, use the debugger(F12) in Chrome to find your mistake! -
is there jquery version to this?
-
Hello,
I wanted to know if it was possible to use this to add 5 different pictures in the same box, using the one on the right to the left and make the ones on the left movable and resizable and removable, and if it is, how may I do it? Thank you. -
How do you detect whether the space is already occupied or not? My picture just gets 'absorbed' by the in place picture.
-
If it doesn't work, try replaceing "Text" in — e.dataTransfer.setData('Text', code); — and in —- e.dataTransfer.getData(''Text'); — with something else(for example, you can but 'bacon' there).
Here have all the code:
function doFirst(){
mypic = document.getElementById('facepic');
mypic.addEventListener('dragstart', startDrag, false);
leftbox = document.getElementById('leftbox');
leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
function startDrag(e){var code = '<img id="facepic" src="IMAGE PATH HERE">';
e.dataTransfer.setData('bacon', code);}
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('bacon');
}
window.addEventListener('load', doFirst, false); -
this code is not working. Please help
-
if you have more pictures, how do you go the other in drag & drop ?!
-
Nothing wrong with the code in tutorial but for copy/paste purposes:
function doFirst(){
mypic = document.getElementById('facepic');
mypic.addEventListener('dragstart', startDrag, false);
leftbox = document.getElementById('leftbox');
leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
function startDrag(e){
var code = '<img src="YOURPIC.jpg">';
e.dataTransfer.setData('Text', code);
}
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
}
window.addEventListener('load', doFirst, false); -
i have replicated the code letter for letter, but not getting the required functionality. In firefox it opens up a new window, and in chrome it does not work.
-
Thanks a lot BUCKY…………
-
Nowadays you need to set up draggable="true" in a source element
-
Thank you for the tutorial !
-
You could use Ajax for this.
-
need help…for my project…tmx again..=)
-
sir your tutorials are great, they help a lot and your teaching skills is very cool… sir I have a question, in the html5 drag and drop…it can be possible that every drop of the picture there will also a query happening????? like every time i will drop the picture on the leftbox an information will be added to the database??????is that possible??????
THANK YOU VERY MUCH…=) -
Can i download this code?
-
Spent ages working on this one! Who'd have thought a simple small b would cause so many problems! Great tutorial!
-
I really enjoy your tutorials, you've got some awesome explaining skills
-
Read about addEventListener in Smashing literature. Wasn't clear on it until I watched this tutorial. Your teaching style is great. Looking forward to viewing the rest!
-
You can change var code = document.getElementById('rightbox').innerHTML; so it would get the image data automatically.
-
The answer is Google Chrome
-
yeah it didn't work for me either . the code changes in chorme but it shows a broken img file on the screen i don't know why ,is that what you see.
-
I don't know why but my JS scripts never work.
-
superb! Bucky is the best teacher!
-
with this can i be able to create multiple selection/div boxes and be able to get them to drag and drop in there own boxes??
-
I am a high school teacher trying to develop a project for my web design class where students create a robot using html5 by dragging and dropping its arms and legs together.
What I’m really looking for is a very simple drag and drop function where the draggable objects stay where you drop them anywhere inside a drop zone.
Thanks!
-
Hi, I would like to ask if i don't want the image to replace the text but on top of it, how should i go it?
Leave a Reply