拖拽演示，原生封装+JQ （详解）

缺乏、安全感 2022-08-13 16:51 145阅读 0赞

http://www.w3cfuns.com/blog-5450759-5401651.html

原始拖拽，三点注意：  
                1：onmousemove与onmouseup需要嵌套在onmousedown内，因为拖拽时鼠标的悬浮于弹起都处在按下的状态中触发的。  
                2：算法是：先将鼠标当前位置与方块到浏览器边缘的距离相减，得出在拖拽过程中的不变量“鼠标到方块边缘的距离”，之后再将方块的距离设为鼠标距离减去鼠标到方块边缘的距离，得出了方块当前的Left与Top，重绘即可,所以记住方块定位得加position:absolute。  
                3：实际中你拉动太快了，方块跟不上了。需要加上obj.setCapture()。临时捕获事件，使得事件由方块来触发，结束后记得取消捕获obj.releaseCapture(); 。这样方块就能及时响应时间了

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>拖拽</title>
    <style>
    #div1 {width: 100px; height: 100px; background: red; position: absolute;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv = document.getElementById('div1');
    	var oImg = document.getElementById('img1');
    
    	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>
    </head>
    
    <body>
    	<div id="div1" style="left: 497px; top: 223px;"></div>
    </body>
    </html>

以下是JQ的，原理相同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>练习</title>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <style type="text/css">
    div{width:100px;height: 100px;background: blue;position: absolute;}
    </style>
    <script type="text/javascript">
    	$(function(){
    		var disY=0;
    		var disX=0;
    		$('div').mousedown(function(ev){
    			disX=ev.pageX-$(this).offset().left;
    			disY=ev.pageY-$(this).offset().top;
    			$(document).mousemove(function(ev){
    				$('div').css('left',ev.pageX-disX);
    				$('div').css('top',ev.pageY-disY);
    			})
    			$(document).mouseup(function(){
    				$(document).off();
    			})
    			return false;
    		})
    	})
    </script>
    </head>
    <body>
    <div></div>
    </body>
    </html>

接下来，我粗浅的讲述一下CUP工作原理。  
        CPU由算术/逻辑单元和控制单元组成； 算术/逻辑单元内是一些可以执行运算的电路，控制单元内有通用寄存器（存储指令，一条指令2字节共16位），还有专用寄存器（程序计数器和指令寄存器），CPU和主存储器通过总线连接，CPU通过总线来读取存储器中的指令和放入计算结果。  
  
当执行命令的时候  
        1：根据程序计算器规定的地址从存储器中取出一条指令放入指令寄存器，然后增加程序计数器的值  
        2：对指令寄存器的位模式进行译码（举例：一条16进制码156C，2进制表示：0001 1001 0110 1100，刚好16位2字节。其中1表示把存储单元的命令载入存储器，5表示地址为5的寄存器，6C表示地址为6C的存储单元。 156C也就是说把地址为6C的存储单元的指令载入寄存器5）  
        3：寄存器根据载入的指令确定选用哪种电路，输入什么点位，由哪个寄存器存储输出结果，结果存在那个存储单元。当然这些行为是由一串指令来完成的。  
  
附上便于理解的图：  
流程： ![113348ycw1z9emkjkei21v.jpg][]  
  
总线传输： ![111622fm5mbkk8f6f65g26.jpg][]  
  
指令读取： ![113337mxzef33h4vzu3hfv.jpg][]

[113348ycw1z9emkjkei21v.jpg]: http://www.w3cfuns.com/data/attachment/album/201411/01/113348ycw1z9emkjkei21v.jpg
[111622fm5mbkk8f6f65g26.jpg]: http://www.w3cfuns.com/data/attachment/album/201411/01/111622fm5mbkk8f6f65g26.jpg
[113337mxzef33h4vzu3hfv.jpg]: http://www.w3cfuns.com/data/attachment/album/201411/01/113337mxzef33h4vzu3hfv.jpg