php拖拽原理,JS拖拽效果及原理解析

这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标。

拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件;鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离(移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置)。然后松开鼠标时,删除移动事件和松开事件,元素完成拖拽。

一开始先监听鼠标按下事件mousedown,事件触发执行mouseHandler函数;

div.addEventListener("mousedown",mouseHandler);

进入mouseHandler函数后,进行if else if 的判断,如果是按下事件,就监听鼠标移动和松开事件,这里要用document文档来作为监听对象,如果使用元素div监听时,如果鼠标在移动过程超出了div元素,就无法拖拽元素;

进入移动事件,就把鼠标移动的距离(鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置)赋值给元素的left和top,元素就可以随着鼠标移动;

最后进入松开鼠标事件,删除了移动和送开鼠标事件,元素就会停在鼠标松开的位置

关键:元素显示位置=鼠标离可视窗口的位置 – 鼠标相对于在div元素左上角的位置

js代码带注释

var div=document.querySelector("div");

var offsetX,offsetY;  //定义全局变量用于接收鼠标坐标的变量

div.addEventListener("mousedown",mouseHandler);

function mouseHandler(e){ //事件的执行函数自带参数e

if(e.type==="mousedown"){ //e.type是执行事件的类型

offsetX=e.offsetX;

offsetY=e.offsetY;

document.addEventListener("mousemove",mouseHandler)

document.addEventListener("mouseup",mouseHandler) //如果有鼠标移动或松开事件的发生再次执行mouseHandler函数

}else if(e.type==="mousemove"){

div.style.left=e.clientX-offsetX+"px"; //鼠标相对当前可视窗口的坐标 - 相对元素左上角的坐标

div.style.top=e.clientY-offsetY+"px";

}else if(e.type==="mouseup"){

document.removeEventListener("mousemove",mouseHandler);

document.removeEventListener("mouseup",mouseHandler); //删除鼠标移动和鼠标松开事件

}

}

效果如图:

81094277e6a43a91d1178869fedad17c.gif

注意:div元素要设置定位才可以进行移动。

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/267313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jqGrid细节备注—pager文字的设置,更改默认的提交方式

默认的pager显示的文字,在英文版本下是如下 (file grid.locale-en.js): $.jgrid { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext : "Page {0} of …

浅谈拓扑排序

今天来讲讲拓扑排序 度娘告诉我 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边(u,v)∈E(G),则u在线性序列中出现在v之前。通常,这样…

iOS开发笔记[18/50]:在Mac OS X Lion系统中访问~/Library目录都需要点技巧

Mac虚拟机升级为Lion系统了,在iPhone模拟机调试时经常想访问应用程序的Document目录看看里面发生的状况,但在Lion系统中却找不到~/Library/Application Support/iPhone Simulator文件夹了。原来需要在Finder中这个~/Library文件夹默认是隐藏的&#xff0…

makemid+matlab,《MATLAB基础》双语课

MATLAB双语教学视频第17讲MATLAB双语教学视频第18讲Summarizing DataIn this section...“Overview” on page 5-10“Measures of Location” on page 5-10“Measures of Scale” on page 5-11“Shape of a Distribution” on page 5-11OverviewMany MATLAB functions enable y…

素数对猜想之python3实现

题目 让我们定义d​n​​为&#xff1a;d​n​​p​n1​​−p​n​​&#xff0c;其中p​i​​是第i个素数。显然有d​1​​1&#xff0c;且对于n>1有d​n​​是偶数。“素数对猜想”认为“存在无穷多对相邻且差为2的素数”。 现给定任意正整数N(<)&#xff0c;请计算不超…

java 获取六个月账期,应收帐龄分析里面账期分析能不能改为0-30天?

怎样安装摄像头的驱动程序怎样安装摄像头的驱动程序注意&#xff1a;请不要在未安装摄像头的驱动程序前将PC摄像头插入计算机USB接口中&#xff1b;如果在没有安装驱动程序的情况下提前插上摄像头&#xff0c;当WINDOWS提示安装驱动程序时&#xff0c;请点击取消键并将其拨出&a…

ribbon源码(1) 概述

ribbon的核心功能是提供客户端在进行网络请求时负载均衡的能力。主要有以下几个模块&#xff1a; 负载均衡器模块 负载均衡器模块提供了负载均衡能力&#xff0c;详细参见ribbon源码之负载均衡器。 配置模块 配置模块管理ribbon的配置信息&#xff0c;ribbon各个模块都通过配置…

Linux软件安装解决方案

Linux软件安装解决方案 在linux中安装软件是一件并不算轻松的工作&#xff0c;有很多中解决方案供你选择&#xff0c;但需要的是你的一点点耐心与智慧&#xff01;下面我将就Linux中最常见的安装方式&#xff0c;由浅入深的逐一做简单介绍与说明&#xff0c;希望可以给您带来帮…

php获取页面的可视内容高度,网页制作技巧:获取页面可视区域的高度_css

文章简介&#xff1a;获取页面可视区域高度&#xff0c;获取页面高度&#xff0c;获取滚动条滚动上去的页面高度.function getWH(){ var wh {}; "Height Width".replace(/[^/s]/g,function(a){ var b a.toLowerCase(); wh[b]window["inner".concat(a)] d…

axios和ajax的区别

Axios和Ajax都是用于在Web应用程序中发送HTTP请求的技术&#xff0c;但它们之间存在一些重要的差异。 环境适用性&#xff1a;Axios可以在浏览器和Node.js环境中使用&#xff0c;而Ajax最初是为了在浏览器中创建交互式网页而设计的。易用性&#xff1a;Axios基于Promise&#…

矩阵学习摘记,欢迎指正

矩阵乘法学习摘记 ​ ——JZYshuraK 18.4.8 http://www.matrix67.com/blog/archives/276 例题1 ​ 为什么一定要将本来只有两维的点设为一个\(1\cdot 3​\)矩阵&#xff0c;原因在于&#xff0c;我们在处理所有操作时&#xff0c;必须使得每一个操作矩阵都是正方形(显然)&#…

安装与配置-以前的某个程序安装已在安装计算机上创建挂起的文件操作......

今日在Windows XP SP2的计算机上&#xff0c;安装SQL Server 2000 Standard Edition&#xff0c;安装不上&#xff0c;错误信息如下&#xff1a; 文字描述为&#xff1a; 以前的某个程序安装已在安装计算机上创建挂起的文件操作。运行安装程序之前必须重新启动计算机。 解决方法…

拦截器和过滤器的区别

一、拦截器基于 java 的反射机制&#xff0c;过滤器是基于函数回调的。 二、过滤器依赖于 servlet 容器&#xff0c;拦截器不依赖 servlet 容器。 三、拦截器只对 Action 起作用&#xff0c; 过滤器对所有请求都起左右 四、拦截器可以访问 Action 的上下文 和 值栈里面的对象&a…

php mail ld preload,读《利用环境变量LD_PRELOAD来绕过php disable_function执行系统命令》有感...

今天看来一篇文章&#xff1a;http://cb.drops.wiki/wooyun/drops/tips-16054.html复现了一下&#xff0c;感觉有点坑我把复现的过程&#xff0c;结果和遇到问题在这里总结一下我的实验环境是centos7 php 5.4首先按照要求编译一个so1.创建一个hehe.c#include #include #include…

带预览图的js切换效果!

效果图&#xff1a; js代码&#xff1a; var isIE (document.all) ? true : false;var $ function (id) {return "string" typeof id ? document.getElementById(id) : id; };var Class {create: function() {return function() { this.initialize.apply(this,…

[BZOJ4033][HAOI2015]树上染色(树形DP)

4033: [HAOI2015]树上染色 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 2437 Solved: 1034[Submit][Status][Discuss]Description 有一棵点数为N的树&#xff0c;树边有边权。给你一个在0~N之内的正整数K&#xff0c;你要在这棵树中选择K个点&#xff0c;将其染成黑色&a…

php数组添加省会城市,【JSON数据】中国各省份省会城市经纬度 JSON

[{ name: 北京, value: [ 116.3979471, 39.9081726, 78 ] },{ name: 上海, value: [ 121.4692688, 31.2381763, 75 ] },{ name: 天津, value: [ 117.2523808, 39.1038561, 95 ] },{ name: 重庆, value: [ 106.548425, 29.5549144, 78 ] },{ name: 河北, value: [ 114.4897766, …

CentOS 6.0安装JDK7

CentOS 6.0安装JDK7 - Sea Wang - 博客园CentOS 6.0安装JDK7话说在CentOS下安装JDK7&#xff08;下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-432154.html&#xff09;&#xff0c;同事直接告诉我说双击jdk-7-linux-…

Python成长之路【第七篇】:Python基础之装饰器

一、什么是装饰器 装饰&#xff1a;装饰既修饰&#xff0c;意指为其他函数添加新功能 器&#xff1a;器既函数 装饰器定义&#xff1a;本质就是函数&#xff0c;功能是为其他函数添加新功能 二、装饰器需要遵循的原则 1、不能修改装饰器的源代码&#xff08;开放封闭原则&#…

php中改变函数路由,php – 如何修改codeigniter中的路由

我终于找到了我想要的东西.以下是我的代码在routes.php中的样子./* Custom Routes. */// Store Normal Pages.$route[home/(:any)] "base/home/$1";$route[about/(:any)] "base/about/$1";$route[services/(:any)] "base/services/$1";$route…