EonerCMS-CMS for a desktop-like system (IV)

Drag

It's been more than a week, and there was a gap on the way, but there was a slight delay in the progress, but fortunately, the last topic was not finished. This time, we continued to move the window and change the size of the window.

Drag a window and change the window size

Because this function may have been done by many people, I just provide a method. Of course, if you have not fully considered it, I hope you can come up with it, I did this for the first time because I did not have much experience in the drag layer function. I also consulted many people. Next, let's take a look at the demo:

The HTML code is as follows:

<Div id = "movedemo"> <div class = "titledemo"> hold down and drag </div> <div style = "position: absolute; overflow: hidden; top: -3px; width: 100%; height: 5px; z-index: 1; cursor: n-resize "resize =" t "> </div> <div style =" position: absolute; overflow: hidden; right:-3px; width: 5px; height: 100%; z-index: 1; cursor: e-resize "resize =" r "> </div> <div style =" position: absolute; overflow: hidden; bottom:-3px; width: 100%; height: 5px; z-index: 1; cursor: s-resize "resize =" B "> </div> <div style =" position: absolute; overflow: hidden; left:-3px; width: 5px; height: 100%; z-index: 1; cursor: w-resize "resize =" l "> </div> <div style =" position: absolute; overflow: hidden; right:-3px; top:-3px; width: 10px; height: 10px; z-index: 2; cursor: ne-resize "resize =" rt "> </div> <div style =" position: absolute; overflow: hidden; right:-3px; bottom:-3px; width: 10px; height: 10px; z-index: 2; cursor: se-resize "resize =" rb "> </div> <div style =" position: absolute; overflow: hidden; left:-3px; top:-3px; width: 10px; height: 10px; z-index: 2; cursor: nw-resize "resize =" lt "> </div> <div style =" position: absolute; overflow: hidden; left:-3px; bottom:-3px; width: 10px; height: 10px; z-index: 2; cursor: sw-resize "resize =" lb "> </div>

In # movedemo, 8 divs are included. I won't introduce the specific functions. I don't understand. I went to see my previous article "EonerCMS -- making a desktop-like CMS (iii)". I have explained this here.

JS Code is the focus. I noted several variables so that you can understand them easily:

$ (). Ready (function () {$ ("# movedemo "). data ("info", {width: 100, height: 100, left: 0, top: 0}); $ (". titledemo "). bind ("mousedown", function (e) {x = e. screenX; // lefty = e. screenY; // The topsT where the mouse is located on the screen =$ ("# movedemo "). offset (). top; sL = $ ("# movedemo "). offset (). left; $ (document ). bind ("mousemove", function (e) {eX = e. screenX; // lefteY = e. screenY; // The screen's toplessX = eX-x; // The offset lessY = eY-y from the initial position; // The offset _ l from the initial position = SL + lessX; _ t = sT + lessY; _ w = $ ("# movedemo "). data ("info "). width + "px"; _ h = $ ("# movedemo "). data ("info "). height + "px"; $ ("# movedemo" ).css ({width: _ w, height: _ h, left: _ l, top: _ t}) ;};}); $ (document ). bind ("mouseup", function () {$ (this ). unbind ("mousemove"); $ ("# movedemo "). data ("info", {width: $ ("# movedemo "). width (), height: $ ("# movedemo "). height ()}) ;}); var moveline = {'T': '', 'r':'', 'B': '', 'L ': '', 'rt ':'', 'rb ':'',' Lt ': '', 'lb':''}; var ml = ""; for (ml in moveline) {// bindResize (ml);}); function bindResize (ml) {$ ("# movedemo div [resize = '" + ml + "']"). bind ("mousedown", function (e) {x = (e. offsetX = undefined )? GetOffset (e). offsetX: e. offsetX; y = (e. offsetY = undefined )? GetOffset (e ). offsetY: e. offsetY; cy = e. clientY; cx = e. clientX; h = $ ("# movedemo "). height (); w = $ ("# movedemo "). width (); $ (document ). unbind ("mousemove "). bind ("mousemove", function (e) {switch (ml) {case "t": if (h + cy-e.clientY> 50) {$ ("# movedemo" ).css ("height", hsf-cy-e.clienty).css ("top", e. clientY-y);} break; case "r": if (w-cx + e. clientX> 100) {$ ("# movedemo" ).css ("width", w-cx + e. clientX);} break; case "B": if (h-cy + e. clientY> 50) {$ ("# movedemo" ).css ("height", h-cy + e. clientY);} break; case "l": if (w + cx-e.clientX> 100) {$ ("# movedemo" width .css ("width", w+cx-e.clientx).css ("left", e. clientX-x);} break; case "rt": if (h + cy-e.clientY> 50) {$ ("# movedemo" height .css ("height", hsf-cy-e.clienty).css ("top ", e. clientY-y);} if (w-cx + e. clientX> 100) {$ ("# movedemo" ).css ("width", w-cx + e. clientX);} break; case "rb": if (w-cx + e. clientX> 100) {$ ("# movedemo" ).css ("width", w-cx + e. clientX);} if (h-cy + e. clientY> 50) {$ ("# movedemo" ).css ("height", h-cy + e. clientY);} break; case "lt": if (w + cx-e.clientX> 100) {$ ("# movedemo" width .css ("width", w+cx-e.clientx).css ("left", e. clientX-x);} if (h + cy-e.clientY> 50) {$ ("# movedemo" ).css ("height", hsf-cy-e.clienty).css ("top", e. clientY-y);} break; case "lb": if (w + cx-e.clientX> 100) {$ ("# movedemo" width .css ("width", w+cx-e.clientx).css ("left ", e. clientX-x);} if (h-cy + e. clientY> 50) {$ ("# movedemo" ).css ("height", h-cy + e. clientY) ;}break ;}}) ;}) ;}function getOffset (e) {var target = e.tar get; if (target. offsetLeft = undefined) {target = target. parentNode;} var pageCoord = getPageCoord (target); var eventCoord = {x: window. pageXOffset + e. clientX, y: window. pageYOffset + e. clientY}; var offset = {offsetX: eventCoord. x-pageCoord. x, offsetY: eventCoord. y-pageCoord. y}; return offset;} function getPageCoord (element) {var coord = {x: 0, y: 0}; while (element) {coord. x + = element. offsetLeft; coord. y + = element. offsetTop; element = element. offsetParent;} return coord ;}

First, I added a data attribute to the window that can be dragged to store four attribute values, width, height, top, and left. Each time I move or change the size, this value is updated and stored in order to restore the size and position before the maximum window.

Then, I bound the mouse-pressed event to the title bar, and then bound the document's mouse-sliding event to the event, instead of directly binding the sliding event to the title bar to prevent mouse movement from moving too fast, remove the area of the title bar, leading to a card-per-card drag effect.

After that, you can obtain the cursor position and update the top and left values of the drag window.

Next, we need to change the window size. First, we need to bind events to the eight Divs, and then use a similar method to get the mouse position, update the values of width, height, top, and left in the window. It is worth mentioning that, because Firefox does not know offsetX and offsetY, there are two methods at the bottom of the Code to obtain the XY value of the offset under Firefox. The call method is as follows: getOffset (e ). offsetX

This is basically the function. Because it is a demo, you need to consider the details. For example, if you drag it to the top of the page, you cannot drag it up to avoid dragging it out of the browser. Of course, the bottom is the same.

Try to avoid the above situation

My practice at the bottom is that you cannot drag the title at most. You can refer to this practice.

For the left and right sides, I refer to a small function in win7, that is, when the mouse is dragged to the edge of the window, the window is automatically converted into a half screen, this aims to make cms more efficient operations. For example, if I want to operate news topics and news articles at the same time, I can open the two pages on both sides of the page and then synchronize the operations, improve efficiency.

This is what we want to talk about. I provide the drag demo. You are welcome to download it. Because it is a demo, it is not written as a plug-in. Click to download it.

PS: Actually, the function is basically okay. I plan to optimize the details on the 11th day. When the National Day holiday comes back, I will release the entire CMS demo for you to see, at that time, I hope you can give me more comments, because after all, it is done by one person, and it is not very comprehensive.

PS2: Thanks to Gray Zhang for answering my questions in a js group.