HTML5 drag-and-drop API, html5api

HTML5 drag-and-drop API, html5api
Drag and drop events
Events provide drag-and-drop control over almost all aspects of drag-and-drop operations. The tricky part is to determine how each event is triggered: when a project is being dragged down, or when others are down. When you drag an item, the following events (in this order ):
Drag start
Drag
Dragend
Now you start by dragging the mouse button and start to move the mouse, and the event-triggered project is dragged. The cursor is changed to a non-drop sign (line-through), indicating that the project cannot fall into itself. You can use the ondragstart event handler to run javascript code and drag it to start.
When the drag start event occurs, drag the event fire and continuous shooting as long as the object is dragged. This is similar to the fire of moving the mouse. The dragend event is triggered when the drag is stopped (because you drop the project to either valid or invalid, drop the target.
The goal of all three projects is to change the RMB. By default, the browser will not change the appearance of the drag element in the resistance, so it is up to you to change the appearance. Most browsers do this. However, when an element is dragged, it is always immediately cloned with a translucent cursor.
When a project is dragged to a valid drag-and-drop target, events occur in the following order:
DragEnter
DragOver
Dragleave or drop
This DragEnter event (similar to a mouse hover fire event) is dragged to the target once the project is dragged down. And then immediately DragEnter the fire event. The DragOver event will continue to fire the project and be dragged down to the target boundary. When the drag-and-drop object is out of the drag-and-drop object, DragOver stops shooting and the dragleave event is triggered (similar to mouseout ). If the project is actually the target of the descent, rather than the event of the descent, dragleave is triggered. These activities aim to reduce the target element.
Custom drag-and-drop targets
When you try to drag an invalid drop target, you can see a special cursor (line through the circle) That means you cannot give up. Even if all elements support drag-and-drop target events, drops are not allowed by default. If you keep an element from dropping it, the dropping event will not trigger any action regardless of the user. However, you can rewrite any element to a valid drag-and-drop target by overwriting the default behavior of the DragEnter and DragOver events such as, if you have
An ID element "droptarget", you can use the following code to turn it into a descent target:
<Trans data-src = "var droptarget = document. getElementById (" droptarget ");
EventUtil. addHandler (droptarget, "dragover", function (event ){
EventUtil. preventDefault (event );
});
EventUtil. addHandler (droptarget, "dragenter", function (event ){
EventUtil. preventDefault (event );
}); "> Reactive droptarget = file. GetElementById ("droptarget ");
Eventutil. AddHandler (droptarget, "DragOver", function (event ){
Eventutil.
PreventDefault (event );});
Eventutil. AddHandler (droptarget, "DragEnter", function (event ){
Eventutil preventDefault (event .); </Trans>
After these changes, you will notice that the cursor now shows that dropping is allowed by dragging the target while dragging the component. At the same time, this drop event will fire.
In Firefox 3.5 +, the default behavior of a single drop of events is to browse the website and target the decline. This means that an image falling to the target will cause the image file to be browsed by the web page, which is the text that falls into the invalid URL error to place the target result. For Firefox browser support, you must also cancel the default event behavior to prevent such navigation:
<Trans data-src = "EventUtil. addHandler (droptarget," drop ", function (event ){
EventUtil. preventDefault (event );
}); "> Eventutil. AddHandler (droptarget, "Drop", function (event ){
Eventutil. PreventDefault (event );
}); </Trans>
Data transmission object
Simply dragging data that is useless is actually affected. Internet Explorer 5 introduces data transmission objects. As a property event, this event is used to move string data from a drag project to a drop target. Because it is a property event, the data transmission object does not exist, except for the applicability of the event handler in a drag-and-drop event. In an event handler, you can use the properties and methods of an object to use the drag-and-drop function. This data transmission object is now part of the HTML5 work draft.
This data transmission object has two main methods: getdata () and setdata (). As you may think, getdata () can read a value stored in setdata (). The first parameter is setdata (), and the unique argument getdata () is the type of the dataset represented by a string: either "text" or "URL", as shown below:
<Trans data-src = "// working with text
Event. dataTransfer. setData ("text", "some text ");
Var text = event. dataTransfer. getData ("text ");
// Working with a URL
Event. dataTransfer. setData ("URL", "http://www.00h5.com /");
Var url = event. dataTransfer. getData ("URL"); "> // text
Event work. Data transmission. SetData ("text", "text ");
Var text = event. Data transmission. GetData ("text ");
/Work and
URL
Event. Data transmission. SetData ("url", "HTTP: // www.00h5 COM. /");
Var url = event. GetData (data transmission; </trans>
Although Internet Explorer introduced "text" and "URL" as valid data types, HTML5 will allow any MIME type to be specified. Values "text" and "URL" will support HTML5 for backward compatibility, but they are mapped to "text/plain" and "text/URI list ".
This data transmission object can contain each MIME type of a value, which means that you can store text without rewriting the URL. Stored in data transmission until the drop event. If you cannot retrieve the data product event handler, the data transmission object is damaged and data is lost.
When you move text from a text box, the browser calls setdata () in the drag text storage "text" format Similarly, when a link or image is dragged, setdata () is called URL storage. It is possible to use getdata () to retrieve the data of these values (). You can also call setdata () to manually start event storage by dragging. You may want to retrieve the custom data.
The difference between the two is that the text and data are treated as a URL. When you specify to store data as text, it has no special treatment. When you specify to store data as a URL, however, it is like a link on a webpage, which means that if you put it in another browser, the browser will locate the URL.
Firefox 5 does not use the alias "URL" to "text/URI list" or "text" to "text/plain ". It, however, alias "text" (uppercase letter T) to "text/plain ". The best cross-browser compatibility for retrieving data from data. You need to check the URL and use the two values "text" for plain text:
<Trans data-src = "var dataTransfer = event. dataTransfer;
// Read a URL
Var url = dataTransfer. getData ("url") | dataTransfer. getData ("text/uri-list ");
// Read text
Var text = dataTransfer. getData ("Text"); "> data transmission; var = event.
/Read URL
Var url = data transmission. GetData (URL) | data transmission. GetData ("text/URI List ");
/Read text
Var text = GetData (data transmission; </trans>
To shorten the data name, it is very important first, Because version 10 does not support the extension and Internet Explorer also throw an error, the data name is not recognized.
Dropeffect and effectallowed
This data transmission object can be used to do more than simply transfer data back and forth; it can also be used to determine what type of behavior can be performed by dragging and dragging the target project. You can use two attributes: dropeffect and effectallowed.
This dropeffect attribute is used to prove that this descent behavior allows the browser. This property has the following four possible values:
"No"-the drag project cannot be thrown here. This is the default value except the text box.
"Move"-the drag item should be moved to the drop target.
Copy-drag the project to copy it to the placement target.
"Link"-indicates that the drop target will be positioned to the drag-and-drop item (if it is a web site ).
These values cause different cursors to display the dropping target when dragging items. It is yours, but actually causes the action cursor to indicate. In other words, nothing is automatic movement, replication, or contact without your direct intervention. The only freedom you get is pointer changes. To use the dropeffect attribute, you must drag and drop it in the ondragenter event handler.
This dropeffect attribute is useless unless you also set effectallowed. This attribute indicates the items that dropeffect allows to drag. Possible values:
"Initialization" has no action that has been set as a drag item.
No action is allowed in the drag project.
"Copy" is only allowed by "copy.
"Link" is only allowed by "Link.
"Mobile" only allows "mobile.
"Copy link" "copy" and "Link" are allowed.
"Copymove" "copy" and "move" are allowed.
"Linkmove", "Link", and "dynamic" are allowed.
All values are not allowed.
This attribute must be set in the ondragstart event handler.
Suppose you want a user to insert text from a text box
. To do this, you must set dropeffect and inclutallowed to "move ". Text will not automatically move itself, because the default behavior in a falling event
Do nothing. If you override the default behavior, the text will be automatically deleted from the text box. Then you insert it
To complete this action. If you change dropeffect and effectallowed to "copy", the text in the text box will not be automatically deleted.
Note: Firefox may have issues with version 5. The Value Setting Code may not be used in case of a falling event.
Draggability
By default, images, links, and text are dragged, which means no additional code is required to allow users to start dragging them. Images and links can only be highlighted after a text drag at any point in time.
It may drag other elements. All HTML elements in HTML5 specify to indicate dragging property if the element can be dragged. Image and link dragging are automatically set to true, and all false default values. This attribute can be set to allow other elements to be dragged or ensure that images or links are not dragged. For example:
<Trans data-src = "<! "> <! </Trans> <trans data-src = "-- turn off dragging for this image -->

<! "> -- Close --> drag the image

<! </Trans> <trans data-src = "-- turn on dragging for this element -->
<Div draggable = "true">... </div> "> -- open and drag this element -->
<Div drag = "true"> ...... </DIV> </trans>
The properties that can be dragged are supported by Internet Explorer 10 + 4 +, Firefox, Safari 5 +, and chrome. Peking Opera 11.5 does not support HTML5 drag and drop. To prevent Firefox from starting, you must add some information about the ondragstart event processing assembly in the data transmission object.
Note: Internet Explorer 9 and earlier let you make any element drag by calling dragdrop () in its method, move the mouse to the event Safari 4 and add a CSS style in the early stages-KHTML user drag: the element is dragged by an element.
Additional Member
The HTML5 specification indicates the data transmission target in the additional Method
AddElement (RMB)-drag an element. This is purely data without affecting the appearance of the drag operation. To write this article, no browser has implemented this method.
Cleardata clears data in a specific format. This is implemented in Internet Explorer, Firefox 3.5 +, Chrome, Safari 4 +.
Setdragimage (Meta, x, y)-allows you to specify the image to be displayed by dragging the mouse. The method accepts three parameters: the X and Y coordinates of an HTML element and the position of the cursor on the image. The HTML element can be an image, in which case the image is displayed, or any other element, in which case a rendered element is displayed. Firefox 3.5, Safari 4 +, and Chrome both support this method.
A data type column is being stored. This set is like an array where the data type is string, such as "text ". Internet Explorer 10 +, Firefox 3.5 +, and Chrome implement this attribute. Reprinted please famous Source: Zero H5 network http://www.00h5.com/