一、拖拽事件: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) 托转的时候,如果有文字被选中会出现问题
原因:当鼠标按下的时候,如果页面中有文字被选中,会触发浏览器默认拖拽文字效果
标准:阻止默认事件
非标准: 全局捕获