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', ...
随机推荐
- 怎样用redis实现分布式锁
引子 redis作为一个强大的key/value数据库.事实上还能够用来实现轻量级的分布式锁. 1.实现方案1 最早官方在SETNX命令页给了一个实现: acquire lock: SETNX loc ...
- POJ 1904 思路题
思路: 思路题 题目诡异地给了一组可行匹配 肯定有用啊-. 就把那组可行的解 女向男连一条有向边 如果男喜欢女 男向女连一条有向边 跑一边Tarjan就行了 (这个时候 环里的都能选 "增广 ...
- ElasticSearch概述和定义
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- Kinect 开发 —— ColorBasic
创建一个Kincet项目通常需要: 1. 创建一个VS项目,一般为了展示通常创建一个wpf项目. 2. 添加Microsoft.Kinect.dll引用,如果是早期版本的SDK,这个名称可能不同. 3 ...
- 给网站设置ICO图标
方法一: 直接在站点根目录下放入名为:favicon.ico 的图标文件(必须要为 ICO 文件,BMP 及其他格式的图片文件不行).还有将 favicon.ico 中的 favico ...
- nohup---将程序以忽略挂起信号的方式运行起来
nohup nohup命令:如果你正在运行一个进程,而且你觉得在退出帐户时该进程还不会结束,那么可以使用nohup命令.该命令可以在你退出帐户/关闭终端之后继续运行相应的进程. 在缺省情况下该作业的所 ...
- at&&atq&&atrm---定时任务
at放在 ls /var/spool/at/ 目录下 At的配置文件/etc/at.deny和/etc/at.allow 如果deny单独存在,则是deny以为的所有用户都可以使用at命令 如果all ...
- nexus 搭建maven私服
1. nexus 下载地址 https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.14.4-03-bundle.tar.g ...
- Java表单设计器orbeon点滴
包含表单设计器和运行展现 一个完整的应用 页面部分都是使用XML和XHTML进行服务端的组合出来的,具体逻辑有些复杂 设计器缺少一个最常用的:repeat,如果需要只能手动编写代码(参考官方文档步骤有 ...
- 取消xp开机默认登陆账户
取消xp开机默认登陆账户 建了个新用户,把以前的用户删除后重新启动电脑,始终停留在 "正在启动" 界面,网上说是 Event Log:Eventlog(系统日志纪录服务) 没有自动 ...