<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Drag and Drop </title>
<Link rel = "stylesheet" href = "">
<Style type = "text/css">
# Div1, # div2 {
Width: 488px;
Height: 70px;
Padding: 10px;
Border: 1px solid # aaaaaa;
}
</Style>
<Script type = "text/javascript">
// It can be placed by default.
Function allowDrop (ev ){
Ev. preventDefault ();
}
// Set drag
Function drag (ev ){
Ev. dataTransfer. setData ("Text", ev.tar get. id );
}
// Set placement
Function drop (ev ){
Ev. preventDefault ();
Var data = ev. dataTransfer. getData ("Text ");
Ev.tar get. appendChild (document. getElementById (data ));
}
</Script>
</Head>
<Body>
<! --
/**
* Drag (event) dragged data
* Drop (evemts) place data
* Draggable = "true" sets the image to be dragged
* Set the event. preventDefault () that allows you to place events that call ondragover ();
* Event. dataTransfer. getData ("Text") obtains data in the specified format from the clipboard.
* Event. dataTransfer. setData ("" Text ", evemt.tar get. id) assigns data to the specified object (Data Type: text, value is the id of the element that can be dragged (drag1 ))
*/
-->
<Div id = "div1" ondrop = "drop (event)" ondragover = "allowDrop (event)">
</Div>
<Div id = "div2" ondrop = "drop (event)" ondragover = "allowDrop (event)">
</Div>
</Body>
</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
