web 拖放
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web 拖放相关的知识，希望对你有一定的参考价值。
<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 拖放的主要内容，如果未能解决你的问题，请参考以下文章
#yyds干活盘点# 4.2 HTML5 拖放(Drag和Drop)