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', ...
随机推荐
- Java Security安全系列文档翻译笔记————KeyStore、密钥、证书、命令行实战
发送方任务: 1.将文档.源代码打包到jar包(这样才干够签名) 2.在keystore中生成相应的Private key和Public key 3.用Private Key对jar包进行签名,这是j ...
- Resize图片
在网站上传图片的时候,提示图片太大了. 有5种方式来调整图片大小 http://www.wikihow.com/Resize-a-JPEG picresize.com 这个网站比较靠谱:使用Windo ...
- 配置远程访问阿里云服务器的Redis
1.默认情况Redis不是在后台运行,我们需要修改把redis放在后台运行:daemonize yes 2.Redis安全策略默认本机访问,所以远程访问的话需要将 bind 127.0.0.1加#注释 ...
- 判断浏览器是否支持某些新属性---placeholder兼容问题解决
function is_true(){ return 'placeholder' in document.createElement('input'); } 实例:placeholder在低版本IE浏 ...
- Oracle新建表字段，如何使字段自增
oracle的自增需要依靠序列和触发器共同实现 比如 新建一张表 create table test (id int primary key, name varchar2(10)); 创建一个序列 ...
- logout命令用于退出当前登录的Shell
logout命令用于退出当前登录的Shell
- excel的隔行插入
https://wenda.so.com/q/1523455238213064 #公式 IF(ISODD(ROW()),OFFSET($B$1,INT((ROW(A1)-1)/2),),OFFSET( ...
- 【CS Round #39 (Div. 2 only) C】Reconstruct Sum
[Link]:https://csacademy.com/contest/round-39/task/reconstruct-sum/ [Description] 给你一个数字S; 让你找有多少对A, ...
- 2048游戏分析、讨论与扩展 - Part I - 游戏分析与讨论
2048这个游戏从刚出開始就风靡整个世界. 本技术博客的目的是想对2048涉及到相关的全部问题进行仔细的分析与讨论,得到一些大家能够接受而且理解的结果. 在这基础上,扩展2048的游戏性,使其变得更好 ...
- 使用wpaint绘图软件时：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...