实现逻辑是这样:
1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,d起做什么.一般鼠标事件都是判断d起的位置
2,判断有效坐标,在事件中判断坐标位置是否在图片位置,也就是图片在canvas的位置.
ex:
//some code...
canvas.width=400
canvas.height=400
var context2d = canvas.getContext("2d")
var img =new Image()
img.src="xxx/xxx.png"
img.onload=function(){
context2d.drawImage(img,X,Y,WIDTH,HEIGTH)
//X=0,Y=0,W=50,H=50
canvas.addEventListener("mouseup", keyUp, false)
}
function keyUp(evt){
Event_UpX = evt.offsetX
Event_UpY = evt.offsetY
if(Event_UpX>=绘制坐标X&&Event_UpX<=图片宽度){
if(Event_UpY>=绘制坐标Y&&Event_UpY<=图片高度){
//do something
}
}
}
<!DOCTYPE html><html>
<head>
<meta charset="GB2312">
<title></title>
<script type="text/javascript">
window.onload=function()
{
var aDiv = document.getElementsByTagName('div')
for (var i=0 i<aDiv.length i++)
{
aDiv[i].onmouseover=function()
{
alert(this.innerHTML)//d出鼠标滑过区域
}
}
}
</script>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
</body>
</html>
先介绍一下html5的drag想要启用drag，只要给元素加上draggable="true"就行了（firefox除外，后面会讲到），默认a和img就是可以拖动的。在线演示地址 http://jsrun.net/JpiKp/edit ，但是在firefox中只是这样还是无法拖动的。还需要加上拖动事件
事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。
一.发生在拖动元素上的事件：
二.发生在目标元素上的事件
可以通过addEventListener来添加事件监听或者直接使用dom0，在firefox中就必须添加dragstart事件并使用event.dataTransfer.setData来添加传递信息
在拖动元素时可以设置传递的信息
event.dataTransfer.setData("te", “sss)两个参数，第一个参数key，第二个参数value。注意只能传递字符串和url，但是在firefox使用text或Text作为key时会打开新的标签页，所以不要用他们作为key。
使用event.preventDefault()可以阻止浏览器默认事件
接下来写一个简单的例子，在线演示地址 http://jsrun.net/JpiKp/edit
html
js
其他事件大家可以自己试一试
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）