You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.6 KiB
80 lines
1.6 KiB
(function($){
|
|
var O = 'opacity',
|
|
C = 'CursorMove',
|
|
M = 'mousemove.drag',
|
|
U = 'mouseup.drag',
|
|
D = 'mousedown.drag',
|
|
W = $(window),
|
|
A = $(document),
|
|
timer = null,
|
|
E = function () {
|
|
this.w.css(O, 1);
|
|
A.unbind(M+' '+U);
|
|
},
|
|
G = function (e) {
|
|
var m = this,
|
|
p = m.w.offset(),
|
|
t = p.top,
|
|
l = p.left,
|
|
r = W.width() - m.w.outerWidth(),
|
|
b = W.height() - m.w.outerHeight(),
|
|
X = e.pageX,
|
|
Y = e.pageY,
|
|
x = m.p.left + (X - m.x) - W.scrollLeft(),
|
|
y = m.p.top + (Y - m.y) - W.scrollTop();
|
|
//以下逻辑保证在可视范围内移动
|
|
if (l <= 0 && X < m.x)
|
|
{
|
|
x = 0;
|
|
m.x = Math.max(X, 0);
|
|
m.p.left = 0;
|
|
}
|
|
if (t <= 0 && Y < m.y)
|
|
{
|
|
y = 0;
|
|
m.y = Math.max(Y, 0);
|
|
m.p.top = 0;
|
|
}
|
|
if (r <= l - A.scrollLeft() && X > m.x)
|
|
{
|
|
x = r;
|
|
m.x = Math.min(X, r);
|
|
m.p.left = r;
|
|
}
|
|
if (b <= t - A.scrollLeft() && Y > m.y)
|
|
{
|
|
y = b;
|
|
m.y = Math.min(Y, b);
|
|
m.p.top = b;
|
|
}
|
|
m.w.css({ left : x, top : y });
|
|
return false;
|
|
},
|
|
S = function (e, m) {
|
|
e.preventDefault();
|
|
m = this;
|
|
m.w.css(O, 0.8);
|
|
m.p = m.w.offset();
|
|
m.x = e.pageX;
|
|
m.y = e.pageY;
|
|
A.bind(M, $.proxy(G, m)).bind(U, $.proxy(E, m));
|
|
};
|
|
$.fn.Drag = function(o){
|
|
return this.each(function () {
|
|
var e = $(this),
|
|
x = function () {
|
|
this.h = o ? (typeof o === 'string' ? $(o, e[0]) : o) : e;
|
|
this.w = e;
|
|
return this;
|
|
},
|
|
X = new x();
|
|
e.data('__h', X.h);
|
|
X.h.addClass(C).unbind(D).bind(D, $.proxy(S, X));
|
|
});
|
|
};
|
|
$.fn.unDrag = function () {
|
|
return this.each(function(){
|
|
($(this).data('__h') || $()).removeClass(C).unbind(D);
|
|
});
|
|
};
|
|
})($);
|
|
|