Home > Developer > Web Develop
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>HTML5 Drag and drop</title> <Scripttype= "Text/javascript"> functionAllowDrop (EV) {ev.preventdefault ();//Cancel Default } functiondrag (EV) {//set the data type and value of the dragged data //The data type is "Text" and the value is the ID of the draggable element ("Drag1"). Ev.dataTransfer.setData ("Text", ev.target.id); } //for placement functionDrop (EV) {ev.preventdefault (); varData=Ev.dataTransfer.getData ("Text"); Ev.target.appendChild (document.getElementById (data)); } </Script> </Head> <Body> <H1>Element drag and drop</H1> <BR/><BR/><BR/><BR/> <PID= "Text1"draggable= "true"ondragstart= "Drag (event)" >Can be dragged</P> <DivID= "Panel1"style= "width:100px; height:100px; border:black solid 1px;float:left;margin-left:100px;"OnDrop= "Drop (event)"OnDragOver= "AllowDrop (event)">Drag it in. 1</Div> <DivID= "Panel2"style= "width:100px; height:100px; border:black solid 1px;float:left;margin-left:200px;"OnDrop= "Drop (event)"OnDragOver= "AllowDrop (event)">Drag it in. 2</Div> </Body></HTML>
HTML5 element Drag and drop
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
