<body>
<div id="div1"></div>
<img src="1.jpg" id="img1" />
</body>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
/*
1.拖拽的时候，如果有文字被选中，会产生问题
原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的行为
解决办法：【标准--阻止默认行为】【非标准ie--设置全局捕获】
2.拖拽图片也会有问题，原因，解决的办法同上
*/
/*
设置全局捕获 ，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发
ie : 有setCapture属性，并且有效果
ff : 有setCapture属性，但是没效果
chrome : 没有setCapture属性
*/
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
drag(oImg);
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;
if ( obj.setCapture ) { //通过判断setCapture属性来确定是否为IE浏览器
obj.setCapture(); //设置全局捕获
}
document.onmousemove = function(ev) {
var ev = ev || event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false; //阻止默认行为
}
}
};
</script>
