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、相关知识拖拽功能
案例描述：实现一个简单的拖拽元素的功能.
案例重点：该案例本身非常简单，但是综合运用了键盘事件和事件对象。