Home > Developer > Web Develop
Drag and drop and drag a thing to another location.
Case 1:
<! DOCTYPE html>
<style type= "Text/css";
#div1, #div2 {width:200px; height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type= "text/javascript";
function AllowDrop (ev)
{
Ev.preventdefault ();
}
//ev.preventdefault () Method: Prevents execution of the default event methods. Be sure to execute preventdefault () in OnDragOver, otherwise the OnDrop event will not be triggered. In addition, if you are dragging things from other applications or files, especially images, the default action is to display the image or related information, not to actually perform the drop. At this point, you need to use the document OnDragOver event to kill it directly.
Function drag (ev)
{
Ev.dataTransfer.setData ("Text", ev.target.id);
//setdata-----give the DataTransfer object the data, ID ("Drag1") in the specified format;
function Drop (EV)
{
Ev.preventdefault ();
var data=ev.datatransfer.getdata ("Text");
Ev.target.appendChild (document.getElementById (data));
}
//calls Preventdefault () to avoid the default processing of data by the browser (the default behavior of the drop event is to open as a link);
//getdata--------Gets the number of the specified format from the Clipboard by DataTransfer object //appendchild----Append the dragged element to the placement element;
</script>
<body>
<div id= "Div1" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>
<br/>
<div id= "Div2" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>
<br/>
OnDrop----------to be placed;
OnDragOver------Drag the picture to where;
Draggable-------property is set to true, that is, the picture can be dragged;
Ondragstart-----Drag the picture;
</body>
: (in case of browser support)
HTML5 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
