码迷,mamicode.com
首页 > Web开发 > 详细

web 拖放

时间:2016-10-06 16:57:38      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

<body>
<div style="height:500px;width:300px;border:1px solid red;float:left">
<img src="1.jpg" style="height:100px;width:100px;">
</div>
<canvas id="canvas"height="500px" width="500px" style="border:2px solid red"></canvas>
<div style=" clear: both"></div>
<script>
var ele=document.getElementById(‘canvas‘);
var canvas=ele.getContext(‘2d‘);
ele.ondragover=function(e){
e.preventDefault();
};
ele.ondrop=function(e) {
var src = e.dataTransfer.getData("text");
var img = new Image();
img.src = src;
img.onload = function () {
canvas.drawImage(img, e.offsetX-50, e.offsetY-50,100,100);
}
};
</script>
</body>

web 拖放

标签:

原文地址:http://www.cnblogs.com/l742314100/p/5933930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!