jq 块的拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; } </style> <script src="jquery-2.2.1.min.js"></script> <script> $(function(){ var disx = 0; var disy = 0; $("div").mousedown(function(ev){ disx = ev.pageX - $(this).offset().left;//鼠标点击到块边缘的距离 进行记录 当块移动后用鼠标的位置-到块的距离= 块定位的距离 disy = ev.pageY - $(this).offset().top; //给document加事件 鼠标怎么也不会脱离 $(document).mousemove(function(ev){ $("div").css("left",ev.pageX - disx); $("div").css("top",ev.pageY - disy); }) $(document).mouseup(function(){ $(document).off();//移除事件 }) return false; }) }) </script> </head> <body> <div></div> </body> </html>