js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能
一、总结
一句话总结：监听的对象必须是文档，鼠标按下运行mousemove事件，鼠标松开取消mousemove事件的绑定，div的偏移的话是pageX和pageY。
1、为什么直接给div加mousemove不行？
因为这样必须选中div才能移动，而且移动的快了鼠标就脱离div了，就移不动了
19 $(document).mousemove(function(e){
20 $('#div1').offset({
21 left:e.pageX,
22 top:e.pageY
23 })
24 })
2、要想实现全局拖动需要监听的事件对象是谁？
document
19 $(document).mousemove(function(e){
20 $('#div1').offset({
21 left:e.pageX,
22 top:e.pageY
23 })
24 })
3、事件拖动的话div的位置坐标应该是什么？
pageX和pageY
20 $('#div1').offset({
21 left:e.pageX,
22 top:e.pageY
23 })
4、如何实现鼠标左键点击的时候才触发拖动效果？
给document添加mousedown事件
18 $(document).mousedown(function(){
19 $(document).mousemove(function(e){
20 $('#div1').offset({
21 left:e.pageX,
22 top:e.pageY
23 })
24 })
5、只添加mousedown事件或鼠标点击的确是跟着动，鼠标松开也还是跟着动，我们如何解决这个问题？
再添加mouseup事件解决鼠标的松开的div还跟着动的问题
16 <script>
17 $(function(){
18 $(document).mousedown(function(){
19 $(document).mousemove(function(e){
20 $('#div1').offset({
21 left:e.pageX,
22 top:e.pageY
23 })
24 })
25 $(document).mouseup(function(){
26 $(document).off('mousemove')
27 })
28 })
29
30 })
31 </script>
二、jquery实现拖拽功能
1、相关知识
案例描述：实现一个简单的拖拽元素的功能.
案例重点：该案例本身非常简单，但是综合运用了键盘事件和事件对象。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;border-radius: 50px;background: orange;position: absolute;}
</style>
</style>
</head>
<body>
<div id="div1"></div>
<script>
$(function(){
$(document).mousedown(function(){
$(document).mousemove(function(e){
$('#div1').offset({
left:e.pageX,
top:e.pageY
})
})
$(document).mouseup(function(){
$(document).off('mousemove')
})
}) })
</script>
</body>
</html>
js进阶 12-17 jquery实现鼠标左键按下拖拽功能的更多相关文章
- 2018-2-13-win10-uwp-获取按钮鼠标左键按下
title author date CreateTime categories win10 uwp 获取按钮鼠标左键按下 lindexi 2018-2-13 17:23:3 +0800 2018-2- ...
- win10 uwp 获取按钮鼠标左键按下
我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? 其实UWP已经没有MouseLeftButtonDown,于是我们可以使用一个简单方法去获取鼠标左键按下. 我们在xa ...
- 在Window工作区按下鼠标左键拖动窗体
Window.DragMove(): 允许使用在窗口工作区的暴露区域上方按下其鼠标左键的鼠标来拖动窗口.(窗口工作区:除去窗体的title.bottom后的剩余部分空间) 使用该方法时注意:一定要在鼠 ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js 鼠标左键拖动滚动
鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
随机推荐
- 操作系统的 （program）loader（程序加载器）
在计算机科学中,加载器(也叫程序加载器)属于操作系统的一部分,用于加载程序(programs)和库(libraries).加载器是执行程序和代码必不可少的组件,正是它负责将程序送入内存,为程序的运行提 ...
- dhclient---获取动态IP
dhclient命令使用动态主机配置协议动态的配置网络接口的网络参数. 语法 dhclient(选项)(参数) 选项 0:指定dhcp客户端监听的端口号: -d:总是以前台方式运行程序: -q:安静模 ...
- col---过滤控制字符
- django模型系统二
常用查询及表关系的实现 1.常用查询 每一个django模型类,都有一个默认的管理器 objects QuerySet表示数据库中对象的列表,它可以有0到多个过滤器.过滤器通过给定参数,缩小查询范围. ...
- dp之多重背包（二进制优化）
void solve(int v,int w,int c){ int count=0; for(int k=1;k<=c;k<<=1) { val[c ...
- 【习题 8-9 1613】 K-Graph Oddity
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 感觉最大度数|1就是最多需要的个数了. 就贪心一下. 然后模拟染色的过程就可以了. (贪心染色就可以了 (看看周围哪个颜色没有,就用 ...
- HBase-scan API 通过scan读取表中数据
直接贴代码啦 /** * * @param zkIp * @param zkPort * @param tablename * @param startRow 传null扫全表 * @param st ...
- 8lession-基础类型转化
Python数据类型转换 有时候,我们需要对数据内置的类型进行转换,数据类型的转换,你只需要将数据类型作为函数名即可. 以下几个内置的函数可以执行数据类型之间的转换.这些函数返回一个新的对象,表示转换 ...
- Maven学习笔记5
Web项目的部署: web部署 配置步骤 生成项目方式不是quickstart,而是webapp. 默认目录结构,需要修改配置. 重新配置project facets和java compiler.并重 ...
- 四、Docker+Tomcat
原文:四.Docker+Tomcat 一.下载Tomcat镜像 具体可以search 搜索tomcat 相关镜像 docker pull sonodar/jdk8-tomcat8 二.创建容器 doc ...