Jquery扩展之拉伸改变元素大小，提供了多个方位的拉伸，自动捕捉鼠标是否移动到了元素的边缘（允许拉伸改变元素的位置）。
Jq代码：
|
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
|
$.fn.extend({
Drag: function() {
$(this).attr("isDrag", 1);
$(this).mousedown(function(e) {
if ($(this).attr("isDrag") == 0) return;
$(this).attr("drag", 1);
$(this).css("position", "absolute");
$(this).css("cursor", "default");
var currentTarget = $(this);
var currentDisX = e.pageX - $(this).offset().left;
var currentDisY = e.pageY - $(this).offset().top;
$(document).mousemove(function(event) {
if ($(currentTarget).attr("drag") == 0 || $(currentTarget).attr("mode") == "re") return;
var currentX = event.clientX;
var currentY = event.clientY;
var cursorX = event.pageX - currentDisX; // $(this).offset().left;
var cursorY = event.pageY - currentDisY; //-$(this).offset().top;
$(currentTarget).css("top", cursorY "px").css("left", cursorX "px");
});
$(document).mouseup(function() {
$(currentTarget).attr("drag", 0);
});
});
},
DisDrag: function() {
$(this).attr("isDrag", 0);
$(this).attr("drag", 0);
},
Resize: function() {
var currentDisTance = 5;
var resizeMode = 0;
var isResize=false;
var isStartResize=false;
$(this).mousemove(function(e) {
var currentDisX = e.pageX - $(this).offset().left;
var currentDisY = e.pageY - $(this).offset().top;
if ($(this).width() - currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance) {
$(this).css("cursor", "nw-resize");
} else if ($(this).width() - currentDisX < currentDisTance) {
$(this).css("cursor", "e-resize");
} else if ($(this).height() - currentDisY < currentDisTance) {
$(this).css("cursor", "n-resize");
} else {
if(isStartResize==true)return;
$(this).css("cursor", "default");
}
});
$(this).mousedown(function(e) {
isResize=true;
var currentDisX = e.pageX - $(this).offset().left;
var currentDisY = e.pageY - $(this).offset().top;
if ($(this).width() - currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance) {
$(this).css("cursor", "nw-resize");
$(this).attr("mode", "re");
resizeMode = 0;
} else if ($(this).width() - currentDisX < currentDisTance ) {
$(this).css("cursor", "e-resize");
$(this).attr("mode", "re");
resizeMode = 1;
} else if ($(this).height() - currentDisY < currentDisTance) {
$(this).css("cursor", "n-resize");
$(this).attr("mode", "re");
resizeMode = 2;
} else {
if(isStartResize==true)return;
$(this).css("cursor", "default");
$(this).attr("mode", "me");
}
var currentTarget = $(this);
var offsetWidth=$(this).width()-$(currentTarget).offset().left;
var offsetHeight=$(this).height()-$(currentTarget).offset().top;
//$(this).css("width",currentWidth currentDisX);
$(document).mousemove(function(event) {
if ($(currentTarget).attr("mode") == "me"||isResize==false) return;
isStartResize=true;
var currentX = event.clientX;
var currentY = event.clientY;
var cursorX = event.pageX - currentDisX; // $(this).offset().left;
var cursorY = event.pageY - currentDisY; //-$(this).offset().top;
if (resizeMode == 0) $(currentTarget).css("height", cursorY offsetHeight "px").css("width", cursorX offsetWidth "px");
else if (resizeMode == 1) $(currentTarget).css("width", cursorX offsetWidth "px");
else $(currentTarget).css("height", cursorY offsetHeight "px");
});
});
$(document).mouseup(function() {
isResize=false;
isStartResize=false;
});
}
});
|
