I can't make it work html5 tutoral #46

+1 daniel ophir · May 6, 2015
Hey every1 i did exactlly what bucky did and i can't make the drag and drop to work.
html code:



<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="daniel.css">
<script src="daniel.js"></script>
</head>
<body>
<section id="leftbox">
i dare you to drag an image in me !!!
</section>
<section id="rightbox">
<img id="facepic" src="Images/s.jpg" width="100" height="100">
</section>
</body>
</html>

css code:


#leftbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid blue;
}
#rightbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid red;
}

JavaScript 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="Images/s.jpg" width="100" height="100">';
e.dataTransfer.setData('Text', code);
}
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
}
 window.addEventListener("load", doFirst, false);

also the video player editor is not working for me.. there is something wierd and i can't figure out where i went wrong.
please help.

Post a Reply

Replies

Oldest  Newest  Rating
0 Sampan Verma · May 6, 2015

function doFirst(){
mypic = document.getElementById('facepic');
mypic = addEventListener("dragstart", startDrag, false);
leftbox = document.getElementById('leftbox');
leftbox.addEventListener("dragenter", function(e){e.preventDefault}, false); // Here there should be period rather than =
leftbox.addEventListener("dragover", function(e){e.preventDefault}, false); // Here there should be period rather than =
leftbox.addEventListener("drop", dropped, false); // Here there should be period rather than =
}
function startDrag(e){
var code='';
e.dataTransfer.setData('Text', code);
}
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
}
window.addEventListener("load", doFirst, false)
0 Sampan Verma · May 6, 2015
I edited only the doFirst(). delete the code next to it
0 Sampan Verma · May 6, 2015
dont use the code I gave you before. It still have error
0 Sampan Verma · May 6, 2015
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);

This is the doFirst function
element = document.getElementByID("elem_id");
element.addEventListener(code...);
0 daniel ophir · May 6, 2015
still won't work...
0 Sampan Verma · May 7, 2015
The only problem left is in the drop event of leftbox
0 daniel ophir · May 7, 2015
Do you know how to solve it?
  • 1

HTML / CSS / Web Design

107,276 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators