Jquery implements drag and drop to adjust the Div size. jquery drag and drop the div size
Today I wrote this jquery plug-in for one day:
You can drag and drop the div to adjust the size.
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. dragDivResize = function (){
Var deltaX, deltaY, _ startX, _ startY;
Var resizeW, resizeH;
Var size = 20;
Var minSize = 10;
Var scroll = getscroloffsets ();
Var _ this = this;
For (var I = 0; I <_ this. length; I ++ ){
Var target = this [I];
$ (Target). on ("mouseover mousemove", overHandler );
}
Function outHandler (){
For (var I = 0; I <_ this. length; I ++ ){
Target. style. outline = "none ";
}
Document. body. style. cursor = "default ";
}
Function overHandler (event ){
Target = event.tar get | event. srcElement;
Var startX = event. clientX + scroll. x;
Var startY = event. clientY + scroll. y;
Var w = $ (target). width ();
Var h = $ (target). height ();
_ StartX = parseInt (startX );
_ StartY = parseInt (startY );
If (0 <target. offsetLeft + w-_ startX & target. offsetLeft + w-_ startX <size) | (0 <target. offsetTop + h-_ startY & target. offsetTop + h-_ startY <size )){
Target. style. outline = "2px dashed #333 ";
If (0> target. offsetLeft + w-_ startX | target. offsetLeft + w-_ startX> size) & 0 <target. offsetTop + h-_ startY & target. offsetTop + h-_ startY <size ){
ResizeW = false;
ResizeH = true;
Document. body. style. cursor = "s-resize ";
}
If (0 <target. offsetLeft + w-_ startX & target. offsetLeft + w-_ startX <size & (0> target. offsetTop + h-_ startY | target. offsetTop + h-_ startY> size )){
ResizeW = true;
ResizeH = false;
Document. body. style. cursor = "w-resize ";
}
If (0 <target. offsetLeft + w-_ startX & target. offsetLeft + w-_ startX <size & 0 <target. offsetTop + h-_ startY & target. offsetTop + h-_ startY <size ){
ResizeW = true;
ResizeH = true;
Document. body. style. cursor = "se-resize ";
}
$ (Target). on ('mousedown', downHandler );
} Else {
ResizeW = false;
ResizeH = false;
$ (Target). off ('mousedown', downHandler );
}
}
Function downHandler (event ){
Target = event.tar get | event. srcElement;
Var startX = event. clientX + scroll. x;
Var startY = event. clientY + scroll. y;
_ StartX = parseInt (startX );
_ StartY = parseInt (startY );
If (document. addEventListener ){
Document. addEventListener ("mousemove", moveHandler, true );
Document. addEventListener ("mouseup", upHandler, true );
} Else if (document. attachEvent ){
Target. setCapture ();
Target. attachEvent ("onlosecapeture", upHandler );
Target. attachEvent ("onmouseup", upHandler );
Target. attachEvent ("onmousemove", moveHandler );
}
If (event. stopPropagation ){
Event. stopPropagation ();
} Else {
Event. cancelBubble = true;
}
If (event. preventDefault ){
Event. preventDefault ();
} Else {
Event. returnValue = false;
}
}
Function moveHandler (e ){
If (! E) e = window. event;
Var w, h;
Var startX = parseInt (e. clientX + scroll. x );
Var startY = parseInt (e. clientY + scroll. y );
Target = target | e.tar get | e. srcElement;
If (target = document. body ){
Return;
}
If (resizeW ){
DeltaX = startX-_ startX;
W = $ (target). width () + deltaX <minSize? MinSize: $ (target). width () + deltaX;
Target. style. width = w + "px ";
_ StartX = startX;
}
If (resizeH ){
DeltaY = startY-_ startY;
H = $ (target). height () + deltaY <minSize? MinSize: $ (target). height () + deltaY;
Target. style. height = h + "px ";
_ StartY = startY;
}
If (e. stopPropagation ){
E. stopPropagation ();
} Else {
E. cancelBubble = true;
}
}
Function upHandler (e ){
If (! E ){
E = window. event;
}
ResizeW = false;
ResizeH = false;
Target = e.tar get | e. srcElement;
$ (Target). on ("mouseout", outHandler );
If (document. removeEventListener ){
Document. removeEventListener ("mousemove", moveHandler, true );
Document. removeEventListener ("mouseup", upHandler, true );
} Else if (document. detachEvent ){
Target. detachEvent ("onlosecapeture", upHandler );
Target. detachEvent ("onmouseup", upHandler );
Target. detachEvent ("onmousemove", moveHandler );
Target. releaseCapture ();
}
If (e. stopPropagation ){
E. stopPropagation ();
} Else {
E. cancelBubble = true;
}
}
Function getscroloffsets (w ){
W = w | window;
If (w. pageXOffset! = Null ){
Return {x: w. pageXOffset, y: w. pageYOffset };
}
Var d = upload Doc ument;
If (document. compatMode = "CSS1Compat "){
Return {x: d.doc umentElement. scrollLeft, y: d.doc umentElement. scrollTop };
}
Return {x: d. body. scrollLeft, y: d. body. scrollTop };
}
}
} (JQuery ));
JQuery ("div"). dragDivResize ();
Record the results of today's work. There may be a lot of immature things. Thank you!
The above is all the content of this article. I hope you will like it.