HTML5 How to implement drag and drop ' N ' drag and drop

In all the technologies that network developers need to master, it seems that the most confusing and potential problems are dragging and dropping.

This is not a new technology, it has been around for years, but many developers are still obsessed with the old jquery-based approach to implicate complex (sometimes slow and inaccurate) drag-and-drop simulations.

Now that HTML5 contains a drag-and-drop API, you have a very simple way to implement no drag-and-drop.

Understanding Mechanics
Drag and drop is easy to understand. You have an object and a goal. The goal is to allow the user to click on the object and drag it to the target, and then your application needs to respond appropriately.

Create a page template
This is simple, but we need to have a place to put all the code items. The most basic page templates that you can create are:

<! DOCTYPE html>
< HTML >
< head >
< BODY >
</Body >
</HTML >
To define a Draggable object
You might expect to have some complex Java-like definitions here, but in fact it's as simple as setting a "draggable" property on an element of your body, like this:

<div>
< img id = "DRAGME" src = "pic.jpg" draggable = "true" >
</div >
As you can see, this part is very simple. In fact, for some browsers, you don't even need to specify attributes for some element types, but anyway, it's still a good idea.

Define goals
The target is the area where the object can be dragged. Again, this is very simple, you just need to give the target a CSS id attribute.

<div id = "Drop_target" >
XXX Leave!
</div >
Add some CSS
We should make sure everything looks as it should look. Add the following CSS style information to your head section:

< STYLE >
#drop_target {border:3 px solid#000; padding: 10 megapixels; height: 100 pixels; width: 100 pixels;}
#dragMe {height:50 px; width:50 px;}
</style>
Realize JS function
This step is only to ensure that your application knows the existence of an object and that it should interact with it. If you need to create a series of event listeners, you can take a complex approach, but you do not need any content that is carefully handled by the basic drag-and-drop operation.

Really, we just need to define two functions to handle all the moves, Dragobject and Dropobject.

<script>
var moved = false;
function Dragobject (e) {
e.datatransfer.effectallowed = "Move";
E.datatransfer.setdata ("Obj1", e.target.id);
returns false;
}
function Dropobject (e) {
if (moved = = True) {
return false;
}
var received = E.datatransfer.getdata ("obj1");
E.datatransfer.dropeffect = "Move";
E.preventdefault ();
E.stoppropagation ();
E.target.appendchild (document.getElementById (Received));
move = true;
returns false;
}
</script>
For example, the content to prevent default values and stop propagating is just to override the default browser behavior, such as possibly causing it to attempt to navigate or open an image somewhere. A variable that has been moved prevents code from executing after the action is performed.

Modifying object declarations and target declarations
If the feature has never been called, nothing will happen. You just need to change the declaration of objects and targets like this:

And

<div id = "Drop_target" OnDragOver = "event.preventdefault ();" OnDrop = "dropobject (

HTML5 How to implement drag and drop ' N ' drag and drop