draggable.js
4.7 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
142
143
144
145
146
147
148
149
150
151
/*
* PHPWind util Library
* @Copyright : Copyright 2011, phpwind.com
* @Descript : 拖拽功能组件
* @Author : chaoren1641@gmail.com, wengqianshan@me.com
* @Depend : jquery.js(1.7 or later)
* $Id: jquery.draggable.js 13814 2012-07-12 09:15:56Z chris.chencq $ :
*/
;(function ( $, window, document, undefined ) {
var pluginName = 'draggable';
var defaults = {
handle : '.handle', // 要拖拽的手柄
limit : true
};
var lastMouseX,lastMouseY;
//当前窗口内捕获鼠标操作
function capture(elem) {
elem.setCapture ? elem.setCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
function release(elem) {
elem.releaseCapture ? elem.releaseCapture() : window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
function getMousePosition(e) {
var posx = 0,
posy = 0,
db = document.body,
dd = document.documentElement,
e = e || window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + db.scrollLeft + dd.scrollLeft;
posy = e.clientY + db.scrollTop + dd.scrollTop;
}
return { 'x': posx, 'y': posy };
}
function Plugin(element,options) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this.handle = element.find(options.handle);
this.init();
}
Plugin.prototype.init = function() {
var handle = this.handle,
options = this.options,
element = this.element,
winWidth,
winHeight,
docScrollTop = 0,
docScrollLeft = 0,
POS_X = 0,
POS_Y = 0,
elemHeight = element.outerHeight(),
elemWidth = element.outerWidth();
handle.css({cursor:'move'});
var el = handle[0].setCapture ? handle : $(document);
handle.on('mousedown',function(e) {
if(options.mousedown) {
options.mousedown(element);
}
if($.browser && $.browser.msie){
//设置鼠标捕获
handle[0].setCapture();
}else{
//焦点丢失
//$(window).blur();
//阻止默认动作
e.preventDefault();
};
capture(this);
//获取窗口尺寸和滚动条状态
winWidth = $(window).width();
winHeight = $(window).height();
docScrollTop = $(document).scrollTop();
docScrollLeft = $(document).scrollLeft();
//获取鼠标的初始偏移值
var offset = element.offset();
var mousePostion = getMousePosition(e);
//记录鼠标相对窗口的位置偏移
if(element.css('position') === 'fixed'){
POS_X = mousePostion.x - offset.left + docScrollLeft;
POS_Y = mousePostion.y - offset.top + docScrollTop;
}else{
POS_X = mousePostion.x - offset.left;
POS_Y = mousePostion.y - offset.top;
}
el.on('mousemove',function(e) {
e.preventDefault();
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//获取鼠标位置、窗口目标位置和移动范围
var mousePostion = getMousePosition(e),
mouseY = mousePostion.y,
mouseX = mousePostion.x,
currentLeft = mouseX - POS_X,
currentTop = mouseY - POS_Y;
//限制弹窗可移动范围,默认不超出可视区域
if(options.limit){
var maxLeft = winWidth - elemWidth + docScrollLeft,
maxTop = winHeight - elemHeight + docScrollTop;
if(currentLeft < docScrollLeft){
currentLeft = docScrollLeft;
}
if(currentTop < docScrollTop){
currentTop = docScrollTop;
}
if(currentLeft > maxLeft){
currentLeft = maxLeft;
}
if(currentTop > maxTop){
currentTop = maxTop;
}
}
//设置窗口位置
element.css({ left : currentLeft + "px", top : currentTop + "px" });
if(options.mousemove) {
options.mousemove(element, left, top);
}
}).on('mouseup.d keydown',function (e) {
//ESC停止拖拽
if(e.type === 'keydown' && e.keyCode !== 27) {
return;
}
release(this);
$(el).unbind('mousemove').unbind('mouseup.d');
if(options.mouseup) {
options.mouseup(element);
}
});
});
}
$.fn[pluginName] = Wind[pluginName]= function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin( $(this), options ));
}
});
}
})( jQuery, window, document );