拖拽演示,原生封装+JQ (详解)

zz/2024/6/13 22:09:43

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:寄存器根据载入的指令确定选用哪种电路,输入什么点位,由哪个寄存器存储输出结果,结果存在那个存储单元。当然这些行为是由一串指令来完成的。

附上便于理解的图:
流程:

总线传输:

指令读取:


http://www.ngui.cc/zz/2748833.html

相关文章

【jQwidgets】简单封装示例

本示例主要是根据div里的属性&#xff0c;根据divID动态生成列columns对象&#xff0c;方便重用、增加、删除&#xff1b; 同时source里的datafield对象也可以用同样的方法获取&#xff0c;但此例未做此操作。 HTML: JAVASCRIPT: 调用 【参数说明】&#xff1a;数据div ID&a…

【jQWidgets】日历支持中文插件

由于jQwidgets中的日历不支持中文&#xff0c;自己加了一 个方便用。 <script type"text/javascript" src"../../jqwidgets/globalization/globalize.js"></script> 路径&#xff1a;\jqwidgets\globalization\ 文件&#xff1a;globalize.cul…

判断PC/Mobile设备类型

<!-- 判断PC/Mobile设备类型 --> <script type"text/javascript"> //方法一&#xff1a; function browserRedirect() { var sUserAgent navigator.userAgent.toLowerCase(); var bIsIpad sUserAgent.match(/ipad/i) "ipad"; var bIsIph…

基于CSS3的WEBAPP横向滑动模式演化

前言 随着移动网络速率和设备硬件水平的不断提升&#xff0c;webapp的发展更加的native化&#xff0c;其表现效果和性能也会越来越好&#xff0c;在可预计的未来很有可能替代native或者平起平坐&#xff0c;那么我们研究更好的交互体验是非常有必要的。 目前我们所常见的webapp…

JavaScript闭包面试题

由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题&#xff0c;似乎很有趣&#xff0c;就当做了一道题去面试&#xff0c;发现几乎没人能全部答对并说出原因&#xff0c;遂拿出来聊一聊吧。 先看题目代码&#xff1a; function fun(n,o) {console.log(o)return {f…

本地开发环境配置Nginx

本地开发环境配置Nginx 目的&#xff1a;前端本地开发环境联调测试服务器上的后端&#xff0c;Cookie不能跨域问题 Mac系统 1.安装Nginx&#xff1a; brew install nginx 安装目录&#xff1a;/usr/local/Cellar/nginx/ 配置文件路径&#xff1a;/usr/local/etc/nginx 日志…

koa+mysql入坑记

github上找了开源项目&#xff0c;下载下来&#xff0c;项目里有blog.sql数据库文件&#xff0c;但不会数据库&#xff0c;跑不起来。。只能现找教程看了。。 github项目地址&#xff1a;https://github.com/nickrogit/stu-koa2blog-server.git 以下操作都是window端 一、my…

一个免费的天气接口

接口地址&#xff1a;http://wthrcdn.etouch.cn/weather_mini 示例&#xff1a;http://wthrcdn.etouch.cn/weather_mini?city深圳

toyReact

从0开始构建一个玩具react react基本组件原理学习vdom的实现思路突破编写自我的难点代码 创建webpack 首先我们创建package.json npm init接下来我们创建webpack npm install webpack --save-dev创建好后新建webpack.config.js 添加entry 开发者模式 以及不压缩代码 modu…