首页 > 代码库 > 拖拽的原理和封装
拖拽的原理和封装
<body>
<div id="div1"></div>
<img src="http://www.mamicode.com/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:全局捕获
拖拽图片会有问题,原因,解决的办法同上
*/
/* ie : 有,并且有效果 ff : 有,但是没效果 chrome : 没有
*/
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 ) { 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>
拖拽的原理和封装
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。