基于jquery的一个简单拖拽功能

拖拽功能,首先是需要 mousedown,mousemove,mouseup 这三个事件的,然后最主要的是怎么样计算 目标元素 随鼠标移动的坐标 。

1. 在mousedown事件里,获取鼠标点击时的坐标:initPos.x | initPos.y 和 目标元素的坐标: $target.offset().left |  $target.offset().top, 计算出 当时鼠标 相对 目标元素左上角的 坐标relPos.x = initPos.x - $target.offset().left , relPosy = initPos.y- $taget.offset().top。

2. 在mousemove 事件里,获取鼠标移动的坐标, event.pageX 和 event.pageY; 目标元素最后的坐标便是: movePos.x = event.pageX - relPos.x; movePos.y = event.pageY- relPos.Y; (这个不理解的画个草图就知道怎么回事了)

3. 在mouseup事件里,停止。

具体的代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>测试的</title>
6 <style type="text/css">
7 body, div { margin: 0; paading: 0; font-size: 12px; }
8 ul, li { margin: 0; padding: 0; list-style: none; }
9 .clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
10 .box { width: 960px; margin: 0 auto; padding-top: 15px; }
11 .bor { width: 100px; height: 80px; margin: 12px; padding: 10px; border: 1px solid #ccc; background: #ececec; }
12
13 </style>
14 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
15 <script type="text/javascript">
16
17 $(document).ready(function(){
18 var move = false; // 移动状态
19 var zIndexCount = 0; // css 中 z-index标识
20 var $bor = $(".bor"), target = null, goal = null;
21 var initPos = {x: 0, y: 0}, relPos = {x: 0, y: 0}, movePos = {x: 0, y: 0};
22 // 初始坐标 和 拖拽最后的位置坐标 也可以这样设置 var initX = 0, initY = 0, rX = 0, rY = 0;
23 var borCount = $bor.length;
24 $bor.each(function() {
25
26 $(this).mousedown(function(event) {
27 $target = $(this);
28
29 // 鼠标点击的初始位置
30 initPos.x = event.pageX;
31 initPos.y = event.pageY;
32
33 goal = $bor.eq($target.index())
34 // 鼠标点击时 相对 目标元素左上角的位置。
35 relPos.x = initPos.x - $target.offset().left;
36 relPos.y = initPos.y - $target.offset().top;

39 move = true;
40
41 zIndexCount++;
42 $target.css({ position: "absolute", zIndex: zIndexCount });
43 });
44
45
46 $(document).mousemove(function(event) {
47 if(move) {
48 //目标元素新的坐标。
49 movePos.x = event.pageX - relPos.x;
50 movePos.y = event.pageY - relPos.y;
51
52 goal.css({ left: movePos.x + "px", top: movePos.y + "px" });
53
54 }
55 }).mouseup(function() {
56 move = false;
57 });
58
59 });
60
61 });
62
63 </script>
64 </head>
65
66 <body>
67 <div class="box">
68
69 <div class="bor">box1</div>
70 <div class="bor">box2</div>
71 <div class="bor">box3</div>
72 <div class="bor">box4</div>
73 <div class="bor">box5</div>
74 <div class="clear"></div>
77 </div>
78
79 </body>
81 </html>

你可能感兴趣的:(jquery)