Note that both the text/uri-list and text/plain contain the same data in this example. The application/x.bookmark type can provide data with more details for use within the application whereas the other types can include just a single URL or text version. Other applications won't support this type, but you can use a custom type for drags between areas of the same site or application.īy providing data in other types as well, we can also support drags to other applications in less specific forms. The first type, application/x.bookmark, is a custom type. Here, data is added in three different types. setData ( "application/x.bookmark", bookmarkString ) It takes two arguments: the type of data and the data value. To set a drag data item within the dataTransfer, use the setData() method. This data will be a simple textual representation. It is usually the case that the least specific type will be normal text data using the type text/plain. This allows data to be provided in more specific types, often custom types, yet still provide fallback data for drop targets that do not support more specific types. The most commonly used types are listed in the article Recommended Drag Types.Ī drag may include data items of several different types. The drag data's types property returns a list of MIME-type like strings, such as text/plain or image/jpeg. During a drop event, a listener would retrieve the data being dragged and insert it at the drop location. For instance, a drop target that accepts links would check for the type text/uri-list. During the drag, in an event listener for the dragenter and dragover events, you use the data types of the data being dragged to check whether a drop is allowed. When the drag begins, you add data by providing a type and the data. The format is a type string (such as text/plain for text data), and the value is a string of text. The drag data contains two pieces of information, the type (or format) of the data, and the data's value. Similarly, when dragging a link on a web page, the drag data item is the link's URL.
For example, when dragging the selected text within a textbox, the data associated with the drag data item is the text itself. When a drag occurs, data must be associated with the drag which identifies what is being dragged. Here is an example which allows a section of content to be dragged.Īll drag events have a property called dataTransfer which holds the drag data ( dataTransfer is a DataTransfer object). Set the drag data in the above listener.
Add a listener for the dragstart event.Set the draggable attribute to "true" on the element that you wish to make draggable.To make other HTML elements draggable, three things must be done: In HTML, apart from the default behavior for images, links, and selections, no other elements are draggable by default. However, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged. An OS-specific rendering of the selection will appear and follow the mouse pointer as the drag occurs. To see this in effect, select an area of a webpage, and then click and hold the mouse and drag the selection. For other elements, they must be part of a selection for a default drag to occur. When an image or link is dragged, the URL of the image or link is set as the drag data, and a drag begins. These include text selections, images, and links.
In a web page, there are certain cases where a default drag behavior is used.
0 kommentar(er)
