Home > Developer > JavaScript
HTML5 drag function drag, html5 drag
1. Create a drag object
Set the draggable attribute for the element to be dragged. It has three values:
True: the element can be dragged;
False: the element cannot be dragged;
Auto: the browser determines whether the elements can be dragged.
2. process drag events
When we drag an object, the drag event is triggered, including:
A. dragstart: triggered when an element is dragged;
B. drag: triggered during element drag;
C. dragend: triggered when an element is dragged to an end.
3. Create a serving area
① Related events will be triggered when an object is dragged into the serving area.
A. dragenter: triggered when the drag object enters the serving area. B. dragover: triggered when the drag object moves in the serving area; C. dragleave: The drag object is not delivered to the serving area and triggered when it leaves the serving area;
D. drop: triggered when the drag object is placed in the serving area.
② Note: dragenter and dragover may be affected by default events. Therefore, we use e. preventDefault (); in these two events to prevent default events.
4. Use dataTransfer to transmit data
When we need to drag an object to transfer data to the serving area, dataTransfer has the following attributes and methods:
1. types: Format of the returned data; 2. getData (<format>): returns data in the specified format. 3. setData (<format >,< data>): sets the data in the specified format;
4. clearData (<format>): removes data in the specified format; 5. files: returns an array of information about the published files. 1. type: file type
2. size: File size
3. name: File name
Programming example:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style>
Div {
Width: 200px;
Height: 200px;
Border: 1px solid red;
Margin: 30px;
Float: left;
}
Img {
Width: 200px;
Height: 200px;
}
</Style>
</Head>
<Body>
<Div id = "div1" ondrop = "drop (event)" ondragover = "allowDrag (event)">
</Div>
<Div id = "div2" ondrop = "drop (event)" ondragover = "allowDrag (event)">
</Div>
</Body>
<Script type = "text/javascript">
Function drag (e ){
E. dataTransfer. setData ("Text", e.tar get. id );
}
Function drop (e ){
Var data = e. dataTransfer. getData ("Text ")
E.tar get. appendChild (document. getElementById (data ));
E. preventDefault ();
}
Function allowDrag (e ){
E. preventDefault ();
}
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
