<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> #dv1 { background: red; width: 100px; height: 100px; position: absolute; } </style> <body> <div id="dv1"></div> </body> <script src="jquery-1.11.3.min.js"></script> <!--<script type="text/javascript" src="jquery-1.10.1.min.js"></script>--> <script> $(function () { var disX = 0; var disY = 0; alert(1); $('#dv1').mousedown(function(ev) { disX = ev.clientX - $(this).offset().left; disY = ev.clientY - $(this).offset().top; $(document).mousemove(function(ev) { $('#dv1').css('left', ev.pageX - disX); $('#dv1').css('top', ev.pageY - disY); }); $(document).mouseup(function() { $(document).off(); }); return false; }) }) </script> </html>
用JQuery写拖拽的简单实例
最新推荐文章于 2020-08-18 11:17:08 发布