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', ...
随机推荐
- SQL Server 为代码减负之存储过程
存储过程能够用来提高数据库的查询效率.由于它事先被编译过.被储存于内存中,每次执行前.不必被从新编译,所以效率非常高. 存储过程是一组sql增删改查的集合,假设程序中的一个功能涉及到对数据库的 ...
- Linq查询案例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- BZOJ 4582 贪心
思路: 显然是个贪心 排个序 然后扫几遍就好了 (重叠的区间不能取) //By SiriusRen #include <cstdio> #include <algorithm> ...
- ElasticSearch 架构图
ElasticSearch 架构图 从下往上来分析ElasticSearch 架构图 Gateway代表ElasticSearch索引的持久化存储方式. 在Gateway中,ElasticSearch ...
- How to anti-Obfuscated code
Author:jin can zhu from China Source:http://blog.csdn.net/clever101 Now many software makers have us ...
- 转 SQL集合函数中利用case when then 技巧
SQL集合函数中利用case when then 技巧 我们都知道SQL中适用case when then来转化数据库中的信息 比如 select (case sex when 0 then '男' ...
- Regularization —— linear regression
本节主要是练习regularization项的使用原则.因为在机器学习的一些模型中,如果模型的参数太多,而训练样本又太少的话,这样训练出来的模型很容易产生过拟合现象.因此在模型的损失函数中,需要对模型 ...
- ES6第二节：新的声明方式
通过上一节的环境搭建完成,接下来我们就可以愉快的探索ES6的新世界了!下面我们从新的声明方式开始: 在ES6里新加了两种声明方式:let 和 const,以前我们都是用var去作声明,接下来我们一一比 ...
- windows安装memcached
http://www.cnblogs.com/wujuntian/p/4791220.html
- 微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...