js拖拽分析
js拖拽分析
思路
1、三个鼠标事件,mousedown,mousemove,mouseup
2、可移动性absolute
3、边界限制
得到鼠标点击处和div边界的距离,然后得出top 和 left 的值
具体
mousedown
div.onmousedown=function(event){
var event=event||window.event
var diffX=event.clientX-div.offsetLeft
var diffY=event.clientY-div.offsetTop
}
diffX/Y得出的是开始点击处和div边界的距离
mousemove
document.onmousemove=function(event){
var event=event||window.event
var l=event.clientX-diffX
var t=event.clientY-diffY
if(t<0){
t=0
}
if(t>document.documentElement.clientHeight-div.offsetHeight){
t=document.documentElement.clientHeight-div.offsetHeight
}
if(l>document.documentElement.clientWidth-div.offsetWidth){
l=document.documentElement.clientWidth-div.offsetWidth
}
if(l<0){
l=0
}
div.style.left=l+'px'
div.style.top=t+'px
}
if后的语句主要是限制边界处而设置的
mouseup
document.onmouseup=function(){
document.onmousemove=null
document.onmouseup=null
}
主要是当鼠标放开时,取消move带来的结果。
当然,还有位置的absolute不要忘记
js拖拽分析的更多相关文章
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- JS拖拽div(移动)
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
随机推荐
- opencv-python与c++ opencv中的一些区别和基础的知识
使用opencv-python一段时间了,因为之前没有大量接触过c++下的opencv,在网上看c++的一些程序想改成python遇到了不少坑,正好在这里总结一下. 1.opencv 中x,y,hei ...
- shared_lock and unique_lock
简单的说: shared_lock是read lock.被锁后仍允许其他线程执行同样被shared_lock的代码.这是一般做读操作时的需要. unique_lock是write lock.被锁后不允 ...
- Centos6.8安装zabbix-3.2.6
系统环境:Centos6.8 mini软件:zabbix-3.2.6 zabbix 服务端安装 安装yum 扩展源 rpm -ivh http://repo.webtatic.com/yum/el6/ ...
- 【echarts3】--1 简单入门
echarts3 相信大家都了解吧,是百度研发的 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8 ...
- 试着把.net的GC讲清楚(2)
试着把.net的GC讲清楚(1) 上篇文章说了一些基本概念的东西,然后还有很多东西概念没有头绪,这篇文章我试着解释 GC的回收算法详细步骤? 上篇]文章讲了.net GC的算法是Mark and Co ...
- Oracle批量操作数据库
1:批量插入 <insert id="insertBatch" parameterType="Java.util.List" > insert in ...
- hdu4149 Magic Potion
Magic Potion Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tota ...
- python入门学习笔记(三)
10.函数 求绝对值的函数 abs(x) 也可以在交互式命令行通过 help(abs) 查看abs函数的帮助信息.调用 abs 函数:>>> abs(100)100>>& ...
- JavaScript数据迭代方法差别
js有很多总接待方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...
- ASP.NET Core的身份认证框架IdentityServer4--(2)API跟WEB端配置
API配置 可以使用ASP.NET Core Web API模板.同样,我们建议您控制端口并使用与之前一样的方法来配置Kestrel和启动配置文件.端口配置为http://localhost:5001 ...