Html5 drag and drop copy and html5 drag
Drag is a common feature, that is, to drag an object to another position after it is captured. In HTML5, drag is part of the standard, and any element can be dragged. Html5 drag-and-drop is a very common function, but most drag-and-drop cases are a cutting process. Html5 drag-and-drop replication is required in projects. Html5 drag-and-drop replication is simple, you only need to make a small change during the drag process of common Html5.
Ps: This blog post is a non-homepage article, just a simple note.
Browser support
Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5
<! DOCTYPE html>
<Html>
<Head>
<StyleType="Text/css">
# Div1 {
Width: 700px;
Height: 120px;
Padding: 10px;
Border: 1px solid # aaaaaa;
}
# Drag1 {
Cursor: pointer;
}
</Style>
<ScriptType="Text/javascript">
FunctionAllowDrop(Ev){
Ev. preventDefault();
}
FunctionDrag(Ev){
Ev. dataTransfer. setData("Text",Ev.tar get. id);
}
FunctionDrop(Ev){
Ev. preventDefault();
VarData=Ev. dataTransfer. getData("Text");
VarItem=Document. getElementById(Data).CloneNode();
Ev.tar get. appendChild(Item);
}
</Script>
</Head>
<Body>
<P> drag and drop Windows Azure images to the rectangle: </p>
<DivId="Div1"Ondrop="Drop (event )"Ondragover="AllowDrop (event )"> </Div>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
Id="Drag1"Src=Http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png"Draggable="True"Ondragstart="Drag (event )"/>
</Body>
</Html>
Code Parsing
The implementation idea is to clone the dragged element and then clone the element.appendChild()To the specified location
Core code for Html5 drag-and-drop Replication.cloneNode()
After Html5 drag-and-drop replication is complete, there are still many things to do inappendChild()It will be completed after execution. Please refer to the specific requirements.
If you just want to implement the traditional HTML5 drag, removevar item = document.getElementById(data).cloneNode();, And thenev.target.appendChild(data);You can.
Author:Please call my first brother
Exit: http://www.cnblogs.com/toutou/
About the author: focused on Microsoft platform project development. If you have any questions or suggestions, please kindly advise me!
Copyright Disclaimer: The copyright of this article is shared by the author and the blog site. You are welcome to reprint this article. However, you must keep this statement without the author's consent and provide the original article link clearly on the article page.
We hereby declare that all comments and private messages will be replied immediately. You are also welcome to correct the mistakes and make progress together. Or directly send a private message to me.
Support blogger: If you think the article is helpful to you, click the bottom right corner of the article[Recommended]. Your encouragement is the greatest motivation for the author to stick to originality and continuous writing!
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
