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>