0

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);
varun teja
  • 244
  • 3
  • 10

2 Answers2

1

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).

Community
  • 1
  • 1
Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
  • but sir your second line of code is what i have in my js file and the chrome debugger console shows error of line: – varun teja Oct 05 '15 at 17:00
  • Uncaught TypeError: Cannot read property 'addEventListener' of null . line: `left.addEventListener("dragenter", function(e){e.preventDefault();}, false);` – varun teja Oct 05 '15 at 17:30
  • You get that error because you probably don't have any element with id `left1` in HTML. Please share the code needed to reproduce the problem (HTML + JavaScript, check [how to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve)). Also, [visit the JSFiddle I shared](http://jsfiddle.net/kg3jy97p/), the JS code works fine once the line issue was fixed, I'm guessing now it's an issue with the HTML (a missing id as I said above) – Alvaro Montoro Oct 05 '15 at 17:38
  • it worked. it was the id. thanks sir. you're awesome :) – varun teja Oct 05 '15 at 18:16
0

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

Gtito
  • 31
  • 4