當前位置：
首頁 >
基本拖拽效果,使用 mousedown , mousemove , mouseup实现
發布時間：2025/4/9
52
豆豆
生活随笔
收集整理的這篇文章主要介紹了
基本拖拽效果,使用 mousedown , mousemove , mouseup实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.一個div拖拽效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本拖拽效果</title><script src="../../common/jquery-1.8.3.min.js"></script><style>*{margin:0;padding:0;}.drag{width:100px;height:100px;background-color:red;position:absolute;top:40px;left:50px;}</style> </head> <body><div class="drag"></div> </body> <script>$(function(){var _move = false;var _x,_y;$(".drag").mousedown(function(e){console.log(e.pageX, e.pageY);_move = true;_x = e.pageX - parseInt($(".drag").css("left"));_y = e.pageY - parseInt($(".drag").css("top"));$(".drag").fadeTo(20,0.5);})$(document).mousemove(function(e){if(_move){var x = e.pageX - _x;var y = e.pageY - _y;$(".drag").css({"left":x,"top":y});}}).mouseup(function(){_move = false;$(".drag").fadeTo("fast",1);})}) </script> </html>2.多個div單獨進行拖拽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本拖拽效果</title><script src="../../common/jquery-1.8.3.min.js"></script><style>*{margin:0;padding:0;}.drag{width:100px;height:100px;background-color:red;position:absolute;top:40px;left:50px;}</style> </head> <body><div class="drag"></div><div class="drag"></div> </body> <script>$(function(){$(".drag").each(function(){var _move = false;var _x,_y;var _this = $(this);$(this).mousedown(function(e){console.log(e.pageX, e.pageY);_move = true;_x = e.pageX - parseInt(_this.css("left"));_y = e.pageY - parseInt(_this.css("top"));_this.fadeTo(20,0.5);})$(document).mousemove(function(e){if(_move){var x = e.pageX - _x;var y = e.pageY - _y;_this.css({"left":x,"top":y});}}).mouseup(function(){_move = false;_this.fadeTo("fast",1);})})}) </script> </html>
轉載于:https://www.cnblogs.com/dyy-dida/p/9976009.html
總結
以上是生活随笔為你收集整理的基本拖拽效果,使用 mousedown , mousemove , mouseup实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jenkins 流水线（pipline)
- 下一篇： java面试题之简单介绍一下集合框架