事件深入应用
来源:互联网 发布:线程优化 编辑:程序博客网 时间:2024/06/05 17:59
一、拖拽事件:onmousedown:选择元素
onmousemove:移动元素
onmouseup:释放元素
drag(oDiv);
function drag(obj){
obj.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
//IE setCapture();
if(obj.setCapture){
obj.setCapture();
}
document.onmousemove = function(ev){
var ev = ev || event;
var Left = ev.clientX - disX;
var Top = ev.clientY - disY;
//控制在可视区内
if( Left < 50){
Left = 0;
}else if( Left >document.documentElement.clientWidth - obj.offsetWidth) {
Left = document.documentElement.clientWidth - obj.offsetWidth;
}
if( Top < 50){
Top = 0;
}else if (Top > document.documentElement.clientHeight - obj.offsetHeight){
Top = document.documentElement.clientHeight - obj.offsetHeight;
}
// 碰撞事件
var L1 = Left;
var R1 = L + obj.offsetWidth;
var T1 = Top;
var B1 = T + obj.offsetHeight;
var L2 = oImg.offsetLeft;
var R2 = L2 + oImg.offsetWidth;
var T2 = oImg.offsetTop;
var B2 = T2 + oImg.offsetHeight;
if( R1< L2 || L1 > R2 || B1 < T2 || T1 > B2){
oImg.src = '1.jpg';
}else{
oImg.src = '2.jpg';
}
obj.style.left = Left + 'px';
obj.style.top = Top + 'px';
}
document.onmouseup = function(){
document.onmousemove = document.onmousedown = null;
//全局捕获 releaseCapture();
if(obj.releaseCapture){
obj.releaseCapture();
}
}
return false;
}
}
1) 托转的时候,如果有文字被选中会出现问题
原因:当鼠标按下的时候,如果页面中有文字被选中,会触发浏览器默认拖拽文字效果
标准:阻止默认事件
非标准: 全局捕获
- 事件深入应用
- 事件深入应用一
- 事件深入应用二
- 事件深入应用三
- 事件深入应用
- 事件应用
- 委托事件(深入)
- JavaScript click事件深入
- JavaScript click事件深入
- 深入委托和事件
- JS 事件深入
- 1-3事件深入
- JavaScript--深入理解事件
- 深入理解事件
- 深入理解事件冒泡和事件捕捉
- RPM深入应用
- WebPage应用深入探讨
- Hive深入应用总结
- 二叉树
- luogu1020 导弹拦截
- Windows10+Visual Studio2013+caffe GPU+CPU环境详细配置
- Java代码将数据导出到Excel
- c++虚拟成员函数
- 事件深入应用
- EditPlus-注册码
- 校内八连测 第一试
- 使用web.py接收post数据时中文变成&#xxxxx;的问题
- 浅谈安卓框架mvp
- Spring AMQP 1.6完整参考指南-第二部分
- vm虚拟机centos7桥接模式连接外网
- 236. Lowest Common Ancestor of a Binary Tree
- 奶牛求幂 迭代加深搜索