I do not understand Several parts of drag and drop

This is my code :

<html>
    <head>
        <style>
            #div1 {
                width:350px;
                height:70px;
                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>Drag the W3Schools image into the rectangle:</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </body>
</html>

Questions:

1) why use document.getElementById(data)? data is variable no id.

2) why data-type in first Parameter setData is text? is image no text.

3)The second parameter setData is Element or id?

4) Why for both event (ondrogover and ondrop) use event.preventDefault? Is it not enough for an event?

Solution

First of all. SO is not a coding school.

But the question is not as noob as it looks.
To ask it like this, I have the feeling that @ehsan certainly read the whole W3C page where he took his code sample. ( http://www.w3schools.com/html/html5_draganddrop.asp )

Okay, so dude wants more specific explanations on this drag and drop thing... to the very depths of every methods and events.
And this very basic W3C explanation doesn't satisfies it's knowledge appetite.
Good student!

Let's get a try to answer it!
First, let's look at the events order :

1- An object is targeted as a draggable object on mouseclick hold over it. This is possible only because this element is defined as : draggable="true"

Here, the event is ondragstart. It triggers the drag() function that «sets data» in a dataTransfer object.

2- User can drag it wherever in the viewport without any effect as long as he wants...
Until he drags it over an element that has a specified event ondragover defined to do something.

In our case, it's the allowDrop() functions that is called.
It is a simple function that says «prevent default».
MORE READING HERE: http://www.w3schools.com/jsref/event_preventdefault.asp

In our case, it removes the default blocking to drop something inside it.
WHY?: Because it's a default for EVERY elements of a web page. So we've got to remove this block as soon as dragover.

3- User finally release his mouse button over this drop enabled element.
So ondrop event is triggered, which calls the drop() function.

This function actually appends the «target» element (element hovered at this moment) with the full HTML object definition (as text!) that was initially dragged by the user.

How Javascript know which element was dragged?
It takes it in the dataTransfer object that was created by the event ondragstart.
This full HTML object is TEXT here... The result of drag() function.

-----
Answers now! ;)

Question #1 : The variable «data» contains an id (This is really basic knowledge of javaScript here).

Question #2 : The data type is «text» because the data appended is in a text format (An HTML element as you would write it in your plain text editor). It can be an image, a link, a button... Whatever.

Question #3 : It's an id. The id of the «target» element TO BE DRAGGED in this case.
(We're in function drag() and we're still over the element to be dragged)

This is not the same «target» as in the drop() function (when the user is over the drop enabled element), because this is now the «target» of an other event.

Question #4 : You probably already understood that before dropping, you have to enable the dropping, since it is blocked by default. Like to open a door before getting in. Simple as that.

-----
MORE READING on the DataTransfer object here : https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer