Drag/Drop is a very common function. You can grab an object and drag it to the area you want to place it. Many javascripts implement similar functions, for example, jQueryUI's draganddrop component. In HTML5, drag and drop has become a standard operation and is supported by any element. Because this feature is so common, all major browsers support this operation.
Enabling the drag-draggable attribute
It is very simple. You only need to change the drag attribute of an element to draggable. This element will support dragging, as shown below:
Transfer of data during dragging During the dragging process, we often need to transfer corresponding logical data to complete the conversion process. Here we mainly use the dataTransfer object for data transfer. , let’s take a look at its members:
Method members:
setData(format,data): Assign the dragged data to the dataTransfer object.
format: a String parameter that specifies the type of data being dragged. The value of this parameter can be "Text" (text type) and "URL" (URL type). This parameter is case-independent, so passing in "text" and "Text" are the same.
data: A variant type parameter that specifies the dragged data. The data can be text, image paths, URLs, etc.
This function has a Boolean return value. true means that the data is successfully added to dataTransfer, false means unsuccessful. If necessary, you can use this parameter to decide whether certain logic should continue to be executed.
getData(format): Get the data stored in dataTransfer drag data.
The meaning of format is the same as that in setData, and the value can be "Text" (text type) and "URL" (URL type).
clearData(format): remove the specified type data.
In addition to the "Text" (text type) and "URL" (URL type) that can be specified above, the format here can also take the following values: file-file, html-html element, image -picture.
This method can be used to selectively process the dragged data type.
Attribute members:
effectAllowed: Sets or gets the operations that can be performed by the data in the data source element.
The attribute type is string, and the value range is as follows:
"copy"-copy data.
"link"-link data.
"move"-move data
"copyLink"-Copy or link data, determined by the target object.
"copyMove"-Copy or move data, determined by the target object.
"linkMove" - Link or move data, as determined by the target object.
"all"-All operations are supported.
"none"-Disable dragging.
"uninitialized"-Default value, adopt default behavior.
Note that after setting effectAllowed to none, dragging is prohibited, but the mouse shape still displays the shape of no draggable object. If you want to not display this mouse shape, you need to set the attribute returnValue of the window event event to false.
dropEffect: Set or get the drag target Allowed operations on the .and related mouse shapes.
The attribute type is string, and the value range is as follows:
"copy"-the mouse is displayed as the shape when copied;
"link"-the mouse is displayed as the connected shape;
"move"-The mouse appears as a moving shape.
"none" (default) - The mouse appears as a shape without dragging.
effectAllowed specifies the operations supported by the data source, so it is usually specified in the ondragstart event. dropEffect specifies the operations supported by the drag and drop target, so in conjunction with effectAllowed, it is usually used in ondragenter, ondragover and ondrop events on the drag target.
files: Returns the list of dragged files FileList.
Types: List of data (draged data) types sent in ondragstart.
The existence of dataTransfer object makes it possible to transfer logical data between the dragged data source and target element. Usually we use the setData method to provide data in the ondragstart event of the data source element, and then use the getData method to obtain the data in the target element.
Events triggered during dragging The following are the events that will occur during a drag. Basically, the triggering sequence of events is the following sequence:
dragstart: Triggered when the element to be dragged starts to be dragged. This event object is Drag and drop elements.
drag: Triggered when an element is dragged. This event object is the dragged element.
dragenter: Triggered when a drag element enters the target element. This event object is the target element.
dragover: Triggered when an element is dragged and moved on the target element. This event object is the target element.
dragleave: Triggered when an element is dragged away from the target element. This event object is the target element.
drop: Triggered when the dragged element is placed within the target element. This event object is the target element.
dragend: Triggered after drop, that is, triggered when dragging is completed. This event object is the dragged element.
Basically, the event parameters of the event will be passed in the relevant elements, which can be easily modified. Here, we don't need to handle every event, usually we only need to hook up the main events.
Drag start-ondragstart event The parameters passed in from this event contain very rich information, from which the dragged element (event.Target) can be easily obtained; You can set the dragged data (event.dataTransfer.setData); so you can easily implement the logic behind dragging (of course you can also pass other parameters when binding).
During the dragging process - ondrag, ondragover, ondragenter and ondragleave events
The object of the ondrag event is the dragged element, and usually this event is handled less frequently. The ondragenter event occurs when the drag enters the current element, the ondragleave event occurs when the drag leaves the current element, and the ondragover event occurs when the drag moves within the current element.
You only need to pay attention to one thing here, because by default, the browser prohibits elements from being dropped, so in order to allow elements to be dropped, you need to return false in this function or call the event.preventDefault() method. As shown in the example below.
Drag end-ondrop, ondragend event When the draggable data is dropped, the drop event is triggered. After the drop is completed, the dragend event is triggered, and this event is relatively rarely used.
Look at a simple example:
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev){
vardata=ev .dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
< ;imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/>
The above example has used various methods and attributes of dataTransfer. Let’s look at another interesting application on the Internet: drag and drop an image to the web page, and then displayed on the web page. This application uses the files attribute of dataTransfer.
