Jquery implements drag and drop to adjust the Div size. jquery drag and drop the div size

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.