The drag-and-drop effect in HTML5 does not require javascript

Comments: Do not use javascript to implement drag-and-drop effects, which has always been what netizens want to see. Second, html5 today provides the following details for you. For more information, see

In Web development, Javascript is needed to implement drag-and-drop effects. Today, let's use Html5 to implement it:
First look at the core html code:

The Code is as follows:
<Div>
<P> drag the yellow small square into the red box </p>
</Div>
<Div id = "item" draggable = "true">
</Div>
<Div id = "drop">
</Div>

The draggable attribute is newly added to html5. It has three values: true, false, auto. true, and false. auto depends on whether the browser supports the draggable attribute. For more information, see the official documentation.
Add a style:

The Code is as follows:
<Style type = "text/css">
# Drop
{
Width: 300px;
Height: 200px;
Background-color: # ff0000;
Padding: 5px;
Border: 2px solid #000000;
}
# Item
{
Width: 100px;
Height: 100px;
Background-color: # ffff00;
Padding: 5px;
Margin: 20px;
Border: 1px dashed #000000;
}
* [Draggable = true] {
-Moz-user-select: none;
-Khtml-user-drag: element;
Cursor: move;
}
*:-Khtml-drag {
Background-color: rgba (238,238,238, 0.5 );
}
</Style>

Then let's look at javascript.:

The Code is as follows:
Function listenEvent (eventTarget, eventType, eventHandler ){
If (eventTarget. addEventListener ){
EventTarget. addEventListener (eventType, eventHandler, false );
} Else if (eventTarget. attachEvent ){
EventType = "on" + eventType;
EventTarget. attachEvent (eventType, eventHandler );
} Else {
EventTarget ["on" + eventType] = eventHandler;
}
}
// Cancel event
Function cancelEvent (event ){
If (event. preventDefault ){
Event. preventDefault ();
} Else {
Event. returnValue = false;
}
}
// Cancel propagation
Function cancelPropagation (event ){
If (event. stopPropagation ){
Event. stopPropagation ();
} Else {
Event. cancelBubble = true;
}
}
Window. onload = function (){
Var target = document. getElementById ("drop ");
ListenEvent (target, "dragenter", cancelEvent );
ListenEvent (target, "dragover", dragOver );
ListenEvent (target, "drop", function (evt ){
CancelPropagation (evt );
Evt = evt | window. event;
Evt. dataTransfer. dropEffect = 'copy ';
Var id = evt. dataTransfer. getData ("Text ");
Target. appendChild (document. getElementById (id ));
});
Var item = document. getElementById ("item ");
Item. setAttribute ("draggable", "true ");
ListenEvent (item, "dragstart", function (evt ){
Evt = evt | window. event;
Evt. dataTransfer. effectAllowed = 'copy ';
Evt. dataTransfer. setData ("Text", item. id );
});
};
Function dragOver (evt ){
If (evt. preventDefault) evt. preventDefault ();
Evt = evt | window. event;
Evt. dataTransfer. dropEffect = 'copy ';
Return false;
}

The above code shows how to use the drag-and-drop Events provided by HTML5. Let's look at the following:
Dragstart
Drag event starts.
Drag
During the drag operation.
Dragenter
Drag is over the target; used to determine if target will accept drop.
Dragover
Drag is over target; used to determine feedback to user.
Drop
Drop occurs.
Dragleave
Drag leaves target.
Dragend
Drag operation ends.
Defines related events to implement desired functions. The above Js is not hard to understand.
You can try it by yourself. Currently, Opera supports the best, and IE does not work well.
Hope to help your Web development.