Html5 Canvas 系列_绘图三(H5 拖放组件)
2017-03-02 09:40
387 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="cloud"> <meta name="Keywords" content="h5 拖放"> <meta name="Description" content="html5拖放组件"> <title>html5拖放组件</title> <style type="text/css"> #draw_div {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> </head> <body> <div id = "draw_div" ondrop = "drop(event)" ondragover = "allowDrop(event)"></div> <br/> <img id = "drag1" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag2" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag3" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag4" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> <img id = "drag5" src = "https://p1.ssl.qhimg.com/d/_hao360/weather/0.png" draggable = "true" ondragstart = "drag(event)" /> </body> <script type = "text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } function drag(ev){ ev.dataTransfer.setData("Text", ev.target.id); } </script> </html>
相关文章推荐
- Html5 Canvas 系列_绘图三(H5 绘制圆弧)
- Html5 Canvas 系列_绘图三(H5 ,CSS3 动态八卦图)
- Html5 Canvas 系列_绘图一
- Html5 Canvas 系列_绘图三(fillStyle 样式填充 矩形、墙)
- Html5 Canvas 系列_绘图二
- Html5 学习系列(五)Canvas绘图API快速入门(1)
- H5基础(5)-HTML5绘图canvas
- Html5 系列之:Canvas绘图
- Html5 学习系列(五)Canvas绘图API快速入门(2)
- HTML5 Canvas disable anti-aliasing drawing - HTML5 Canvas 如何取消反锯齿绘图
- HTML5中的Canvas绘图操作(四)
- HTML5中的Canvas绘图操作(一)
- HTML5-Canvas绘图
- HTML5中的Canvas绘图操作(五)
- HTML5 组件Canvas实现电子钟
- HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):(二)基本动画(canvas先生很忙)
- HTML5 canvas globalCompositeOperation 设置绘图的顺序
- 创建HTML5 LOGO,Canvas绘图
- HTML5 canvas globalCompositeOperation绘图顺序讲解
- HTML5 组件Canvas实现图像灰度化