拖拽的原理和封装

Posted Booo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽的原理和封装相关的知识，希望对你有一定的参考价值。

<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：全局捕获
	拖拽图片会有问题，原因，解决的办法同上
　　*/
	
　　/*
	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>
 

以上是关于拖拽的原理和封装的主要内容，如果未能解决你的问题，请参考以下文章

编写可拖拽的弹窗

js拖拽原理和碰撞原理

WPF中元素拖拽的两个实例

jquery 或js关于鼠标单击和拖拽的区别

自定义拖拽

element拖拽的select下拉框