Home > Developer > Web Develop
1, drag the relevant settings of the element img:
Set elements to drag properties
Draggable= "true"
Sets the event that is triggered when an element is dragged
ondragstart= "Drag (event)"
Full code for picture elements to drag
Html:
Javascript:
<script>function Drag (event) { event.dataTransfer.setDate ("Text", ev.target.id);} </script>2. Set the element div that allows drag object placement:
Allow drag pictures to be placed inside Div, block the default handling of events, add attributes inside div
Ondragover= "AllowDrop (event)"
Events that are triggered when placed
ondrop= "Drop (event)"
div element can place the full code of the drag img
Html:
<div id= "Div1" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" style= "width:600px; height:100px; border:1px solid Black "></div>
Javascript:
<script>function drag (EV) { ev.dataTransfer.setData ("Text", ev.target.id);} function AllowDrop (EV) { ev.preventdefault ();} function Drop (EV) { ev.preventdefault (); var data = Ev.dataTransfer.getData ("Text"); Ev.target.appendChild (document.getElementById (data));} </script>3. Drag the two image img into a div and place the complete code side-by
Html:
<body> <div id= "Div1" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div> </body>
Css:
<style type= "Text/css" > #div1 {width:600px; height:100px; border:1px solid black; padding:10px}.img {width:60px; height:90px; margin:10px; Float:left}</style>Javascript:
<script type= "Text/javascript" >function drag (EV) { ev.dataTransfer.setData ("text", ev.target.id);} function AllowDrop (EV) { ev.preventdefault ();} function Drop (EV) { ev.preventdefault (); var data = Ev.dataTransfer.getData ("Text"); Ev.target.appendChild (document.getElementById (data));} </script>HTML5 element Drag (reprint Black Tong)
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
