Reputation: 336
hi im stuck with making a drag and drop function in html5.i tested the code on chrome and when i try to drop it in the area where i made it for dropping the code
it shows a stop sign as arrow. i actually made a bordered section box in which i have some text that i want to be changed when i drop my image in it.
this is my js code:
function doFirst(){
pic = document.getElementById('pic1');
pic.addEventListener("dragstart", startDrag , false);
left = document.getElementById('left1');
left.addEventListener("dragenter", function(e){e.preventDefault();}, false);
left.addEventListener("dragover", function(e){e.preventDefault();} , false);
left.addEventListener("drop", dropped , false);
}
function startDrag(e){
var code = '<img id="pic1" src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';
e.dataTransfer.setData('hello', code);
}
function dropped(e) {
e.preventDefault();
left.innerHTML = e.dataTransfer.getData('hello');
}
window.addEventListener("load", doFirst , false);
Upvotes: 0
Views: 213
Reputation: 29735
First, a piece of advice: learn how to debug and use the developer's tools (specially the console) provided by the modern browsers (or use Firebug/Web development extensions if you prefer).
Had you checked the console, then you'd have seen that the code throws a JS error ("Syntax error: Unexpected token") and you'd know where in the code that error was. In particular, on this line:
var code = '<img id="pic1"
src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';
If you search online, you'll see that "javascript strings must be terminated before the next newline character" (from Andrew Dunn's answer to this question). And once that error is fixed:
var code = '<img id="pic1" src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';
the rest of your code works fine, as you can see on this JSFiddle (I added real URLs to the pictures so you could see the effect working).
Upvotes: 1
Reputation: 41
try with this code:
<!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">
</body>
</html>
Font: http://www.w3schools.com/html/html5_draganddrop.asp
Upvotes: 0