Pages
Home
Maya
Photoshop
3D Max
Web Designs
Contact
Zservice
Saturday, 20 July 2013
Image Drag and Drop in Html
Image Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
Header portions ...
<head><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style><script>function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script></head>
Body portions...
<body> <p> Drag the logo image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <br><img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </body>
No comments:
Post a Comment
Newer Post
Older Post
Home
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment