jquery.draggable_wev8.js
3.3 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
/**
* draggable 1.0 - jQuery Plug-in
*
* Licensed under the GPL:
* http://gplv3.fsf.org
*
* Copyright 2009 stworthy [ stworthy@gmail.com ]
*/
(function($){
$.fn.draggable = function(options){
function doDown(e){
$.data(e.data.target, 'draggable').options.onStartDrag(e);
return false;
}
function doMove(e){
var dragData = e.data;
var left = dragData.startLeft + e.pageX - dragData.startX;
var top = dragData.startTop + e.pageY - dragData.startY;
if (e.data.parnet != document.body) {
if ($.boxModel == true) {
left += $(e.data.parent).scrollLeft();
top += $(e.data.parent).scrollTop();
}
}
var opts = $.data(e.data.target, 'draggable').options;
if (opts.axis == 'h') {
$(dragData.target).css('left', left);
} else if (opts.axis == 'v') {
$(dragData.target).css('top', top);
} else {
$(dragData.target).css({
left: left,
top: top
});
}
$.data(e.data.target, 'draggable').options.onDrag(e);
return false;
}
function doUp(e){
$(document).unbind('.draggable');
$.data(e.data.target, 'draggable').options.onStopDrag(e);
return false;
}
return this.each(function(){
$(this).css('position','absolute');
var opts;
var state = $.data(this, 'draggable');
if (state) {
state.handle.unbind('.draggable');
opts = $.extend(state.options, options);
} else {
opts = $.extend({}, $.fn.draggable.defaults, options || {});
}
if (opts.disabled == true) {
$(this).css('cursor', 'default');
return;
}
var handle = null;
if (typeof opts.handle == 'undefined' || opts.handle == null){
handle = $(this);
} else {
handle = (typeof opts.handle == 'string' ? $(opts.handle, this) : handle);
}
$.data(this, 'draggable', {
options: opts,
handle: handle
});
// bind mouse event using event namespace draggable
handle.bind('mousedown.draggable', {target:this}, onMouseDown);
handle.bind('mousemove.draggable', {target:this}, onMouseMove);
function onMouseDown(e) {
if (checkArea(e) == false) return;
var position = $(e.data.target).position();
var data = {
startLeft: position.left,
startTop: position.top,
startX: e.pageX,
startY: e.pageY,
target: e.data.target,
parent: $(e.data.target).parent()[0]
};
$(document).bind('mousedown.draggable', data, doDown);
$(document).bind('mousemove.draggable', data, doMove);
$(document).bind('mouseup.draggable', data, doUp);
}
function onMouseMove(e) {
if (checkArea(e)){
$(this).css('cursor', 'move');
} else {
$(this).css('cursor', 'default');
}
}
// check if the handle can be dragged
function checkArea(e) {
var offset = $(handle).offset();
var width = $(handle).outerWidth();
var height = $(handle).outerHeight();
var t = e.pageY - offset.top;
var r = offset.left + width - e.pageX;
var b = offset.top + height - e.pageY;
var l = e.pageX - offset.left;
return Math.min(t,r,b,l) > opts.edge;
}
});
};
$.fn.draggable.defaults = {
handle: null,
disabled: false,
edge:0,
axis:null, // v or h
onStartDrag: function(){},
onDrag: function(){},
onStopDrag: function(){}
};
})(jQuery);