├── README.md
├── index.html
└── js
└── move.js
/README.md:
--------------------------------------------------------------------------------
1 | 预览地址: http://www.daiwei.org/components/move/
2 |
3 | # move
4 | 元素拖动效果，兼容pc、移动端
5 |
6 | ## 参数
7 | * ### zIndex
8 | 层级
9 |
10 | * ### cursor
11 | pc端设置元素鼠标的类型 默认是move
12 |
13 | * ### type
14 | 类型 pc 或者 mobile 或者 all (在什么地方可使用)
15 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 移动效果 兼容PC 移动端
6 |
7 |
8 |
9 |
35 |
36 |
37 | 拖我吖
38 |
39 |
40 |
41 |
44 |
45 |
--------------------------------------------------------------------------------
/js/move.js:
--------------------------------------------------------------------------------
1 | (function($){
2 | //拖拽功能
3 | $.fn.move = function(options){
4 | var _this = this;
5 | var $this = $(this);
6 |
7 | var defalutValue = {
8 | zIndex: 111111, //层级
9 | cursor: 'move', //鼠标移入的效果
10 | type: 'all', //类型 pc / mobile / all 三种
11 | }
12 |
13 | var opt = $.extend(defalutValue,options||{});
14 |
15 | defalutValue.pcMove = function(){
16 | $this.css({
17 | cursor:opt.cursor,
18 | });
19 |
20 | var mouseOffsetX=0; //获取鼠标距离divtop left 的像素
21 | var mouseOffsetY=0;
22 | var isDraging=false; //是否可以拖动
23 |
24 | var moveX = 0; //div需要定位的位置
25 | var moveY = 0;
26 |
27 | $this.on('mousedown',function(e){
28 | isDraging=true;
29 |
30 | var e = e || window.event;
31 | mouseOffsetX = e.pageX - $this.offset().left;
32 | mouseOffsetY = e.pageY - $this.offset().top;
33 | // console.log($this.offset().left+'----'+ $this.offset().top);
34 |
35 | $(document).on('mousemove',function(e){
36 | var e = e || window.event;
37 | var mouseX = e.pageX;
38 | var mouseY = e.pageY;
39 |
40 | if(isDraging){
41 | moveX = mouseX - mouseOffsetX;
42 | moveY =mouseY - mouseOffsetY;
43 |
44 | var maxX=document.documentElement.scrollWidth-$this.width();
45 | var maxY=document.documentElement.scrollHeight-$this.height();
46 |
47 | moveX = Math.min(maxX,Math.max(0,moveX));
48 | moveY = Math.min(maxY,Math.max(0,moveY));
49 |
50 | $this.css({
51 | position:'absolute',
52 | transform:'translate3d(0,0,0)',
53 | left:moveX,
54 | top:moveY,
55 | 'z-index':1111,
56 | })
57 | }
58 | });
59 |
60 | $(document).on('mouseup',function(e){
61 | isDraging=false;
62 | // console.log(isDraging);
63 | });
64 | });
65 | }
66 |
67 | defalutValue.mobileMove = function(){
68 | //******************************************************这以下是手机上的效果 以上是pc的效果
69 | var touch_x = 0, //手触摸屏幕的起始x值
70 | touch_y = 0, //手触摸屏幕的起始y值
71 | move_x = 0,
72 | move_y = 0,
73 | x = 0,
74 | y = 0,
75 | touch_move = 0,
76 | touch_start = 0;
77 |
78 | $this.on('touchstart',function(event){
79 | event.preventDefault();
80 | touch_start = event.originalEvent.touches[0] || event.originalEvent.targetTouches[0];
81 | touch_x = touch_start.pageX - $this.offset().left;
82 | touch_y = touch_start.pageY - $this.offset().top;
83 | });
84 |
85 | $this.on('touchmove',function(event){
86 | touch_move = event.originalEvent.touches[0] || event.originalEvent.targetTouches[0];
87 | move_x = touch_move.pageX;
88 | move_y = touch_move.pageY;
89 | x = (move_x - touch_x); //获取的是手指x方向的位移距离
90 | y = (move_y - touch_y); //获取的是手指y方向的位移距离
91 |
92 | var maxX=document.documentElement.scrollWidth-$this.width();
93 | var maxY=document.documentElement.scrollHeight-$this.height();
94 |
95 | x = Math.min(maxX,Math.max(0,x));
96 | y = Math.min(maxY,Math.max(0,y));
97 |
98 | $this.css({
99 | position:'absolute',
100 | transform:'translate3d(0,0,0)',
101 | left:x,
102 | top:y,
103 | 'z-index':options.zIndex,
104 | });
105 | });
106 | }
107 |
108 | switch (opt.type){
109 | case 'pc':
110 | defalutValue.pcMove();
111 | break;
112 |
113 | case 'mobile':
114 | defalutValue.mobileMove();
115 | break;
116 |
117 | case 'all':
118 | defalutValue.pcMove();
119 | defalutValue.mobileMove();
120 | break;
121 | }
122 |
123 | return _this;
124 | }
125 | })(jQuery)
--------------------------------------------------------------------------------