drageasy.js
3.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
(function($)
{
$.extend({
mouseCoords:function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
},
getStyle:function(obj,styleName)
{
return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
}
});
$.fn.dragDrop = function(options)
{
var opts = $.extend({},$.fn.dragDrop.defaults,options);
return this.each(function(){
var bDraging = false;
var moveEle = $(this);
var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
if(!focuEle || focuEle.length<=0)
{
return false;
}
var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''};
moveEle.css({'position':'absolute','z-index':'9999','left':0,'top':0});
moveEle.css({'cursor':'move'});
if(opts.follower){
var containercord = opts.imgInnerCord;
var imgtop = (containercord.height - opts.origalCord.height)/2;
if(opts.origalCord){
var newCord = {
'position':'absolute',
'z-index':'9998',
'left':opts.origalCord.left + 'px',
'top':(opts.origalCord.top+imgtop) + 'px'
};
opts.follower.css(newCord);
opts.follower.data("origalCord", newCord);//缓存初始位置
}
}
focuEle.bind('mousedown',function(e){
bDraging = true;
focuEle.css('cursor', 'move');
if(moveEle.get(0).setCapture)
{
moveEle.get(0).setCapture();
}
dragParams.initDiffX = $.mouseCoords(e).x - moveEle[0].offsetLeft;
dragParams.initDiffY = $.mouseCoords(e).y - moveEle[0].offsetTop;
});
focuEle.bind('mousemove',function(e){
if(bDraging)
{
dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
if(opts.fixarea)
{
if(dragParams.moveX<opts.fixarea[0])
{
dragParams.moveX=opts.fixarea[0]
}
if(dragParams.moveX>opts.fixarea[1])
{
dragParams.moveX=opts.fixarea[1]
}
if(dragParams.moveY<opts.fixarea[2])
{
dragParams.moveY=opts.fixarea[2]
}
if(dragParams.moveY>opts.fixarea[3])
{
dragParams.moveY=opts.fixarea[3]
}
}
if(opts.dragDirection=='all')
{
moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
if(opts.follower){
opts.follower.css({'left':dragParams.moveX,'top':dragParams.moveY});
}
}
else if (opts.dragDirection=='vertical')
{
moveEle.css({'top':dragParams.moveY});
if(opts.follower){
opts.follower.css({'top':dragParams.moveY});
}
}
else if(opts.dragDirection=='horizontal')
{
moveEle.css({'left':dragParams.moveX});
if(opts.follower){
opts.follower.css({'left':dragParams.moveX});
}
}
if(opts.callback)
{
opts.callback.call(opts.callback,dragParams);
}
}
});
focuEle.bind('mouseup',function(e){
bDraging=false;
moveEle.css({'cursor':'default'});
if(moveEle.get(0).releaseCapture)
{
moveEle.get(0).releaseCapture();
}
e.stopPropagation();
e.cancelBubble = true;
});
});
};
$.fn.dragDrop.defaults =
{
focuEle:null,
callback:null,
dragDirection:'all',
fixarea:null
};
})(jQuery);