Use jQuery UI to implement the drag-and-drop layout effect for CMS websites, and kill the table layout in seconds.

Use jQuery UI to implement the drag-and-drop layout effect for CMS websites, and kill the table layout in seconds.

1. Effect

People who have used the CMS system to create websites should be clear that there is an important step in the website creation process, namely page layout. Currently, there are two ways to achieve page layout: table and div. The two methods have their own advantages and disadvantages.

Table:

Advantage: it is easy to use. It is easy to understand and create tables.

Disadvantage: The table layout is relatively fixed, and the layout effect control is relatively dead. Some of the special effects and stacked effects are difficult to achieve.

Div:

Advantage: The layout effect is flexible, and div can easily control the layout position and floating effect.

Disadvantage: operations are complicated, and front-end layout designers are familiar with div features and stacked styles.

We can see that the table and div layout methods are mutually advantageous. However, currently, div is becoming a mainstream design method, and its layout effect is flexible and the features of new styles are becoming more and more popular. What we are talking about here is that if you want to use the drag-and-drop method to easily implement the page layout, it is not a div.

For example, you can drag the layout div into the layout area, move its position with the mouse drag, select it, and move the positions in all directions using the keyboard, you can also delete it with the delete key. In addition, you can drag the lower right corner of the div to change the size of the div.

Double-click a div. The Properties dialog box is displayed. You can enter the width and height of the div, and add the content in the div area.

2. Tools used

The entire tool is created using jQueryUI. The following jQueryUI members are used in the production process:

1) Accordion

Used to implement the left-side Maple Leaf menu. The div source is based on this.

 

2) Draggable

Drag items are implemented using Draggable.

 

3) Droppable

Droppable is used to release a layout zone.

 

4) Resizable

Resizable is used to set the div size by dragging.

 

5) Dialog

Dialog is used to create an attribute Dialog box that pops up when you double-click a div.

 

3. Implementation Process

3.1 add left-side folding navigation

Added the left-side folding navigation and used Accordion in jQueryUI.

Code:

// Increase the folding effect $ ("# catalog "). accordion ({heightStyle: "fill"}); // drag the elements in the <li> label $ ("# catalog li "). draggable ({appendTo: "body", // used to specify the ui of the Control During dragging. helper container. By default, the ui. helper uses the same container as the initially defined draggable, that is, its parent element. the default value is "parent" helper: "clone" // display mode when you drag an element. (If it is a Function, the returned value must be a DOM element.) Optional values: "original", "clone", and default value of Function: "original "});

3.2 set the layout canvas

The list items can be dragged. Now you need to receive these elements. The effect we want to achieve is to drag out the list on the left and put it into the layout canvas area on the right. Therefore, we need to set the layout canvas area as the receiving area. jQueryUI provides Droppable to achieve this effect:

Var bordNum = 0; $ ("# pageAreaWrapper div "). droppable ({activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept :". item ", drop: function (event, ui) {// $ (this ). find (". placeholder "). remove (); var divContent = ""; // generate divvar ss =$ ("<div id = \" border _ "++ bordNum +" \ "class = \" item-accepted componentWrapper \ "style = \ "position: absolute; z-index: 101; \ ">" + "<div class = \" shield \ "style = \" position: absolute \ ">" + "</div>" + "<div class = \" wrapperBorder \ "style = \" background-color: transparent; border: 0px solid transparent; opacity: 1; \ ">" + "<div class = \" wrapperPadding \ ">" + "<div class = \" wrapperContent \ "style = \" width: 320px; height: 240px; word-break: break-all \ ">" + divContent + "</div>" + "</div> "); // ss. text (ui. draggable. text ()). appendTo (this); ss. appendTo (this); // obtain the drag position var px = ui. position. left; var py = ui. position. top; // obtain the absolute offset of the layout canvas pageArea on the entire page var pageArea_px =$ ("# pageArea") [0]. offsetLeft; // 73 is added here because the top position of the outer table is 73var pageArea_py = $ ("# pageArea") [0]. offsetTop + 73; // alert ("cart2_px =" + cart2_px + ", cart2_py =" + cart2_py ); // obtain the scrolling distance from the scroll bar var scrollpx =$ ("# bodyOfPage "). scrollLeft (); var scrollpy =$ ("# bodyOfPage "). scrollTop (); // The position when the cursor is dragged. The setPosition (ss, px-pageArea_px + scrollpx, py-pageArea_py + scrollpy) of the scroll bar must be taken into account. draggable ({containment: "# pageAreaWrapper", scroll: false, stop: function (event, ui) {}}); // double-click the div to edit the internal content of the div ss. dblclick (function () {var dialog; dialog =$ ("# dialog-form "). dialog ({autoOpen: false, height: 400, width: 450, modal: true, buttons: {OK: function () {var valid = true; if (valid) {var content = dialog. find ("# content"); var divWidth = dialog. find ("# divWidth"); var divHeight = dialog. find ("# divHeight"); // alert (divWidth. val () + "" + divHeight.val());ss.css ('width', divWidth. val (); ss. find (". wrapperContent "pai.css ('width', divwidth.val({%%ss.css ('height', divHeight. val (); ss. find (". wrapperContent "pai.css ('height', divHeight. val (); ss. find (". wrapperContent "pai.html (content. val (); dialog. dialog ("close") ;}return valid ;}, Cancel: function () {dialog. dialog ("close") ;}}, close: function () {// form [0]. reset (); // allFields. removeClass ("ui-state-error") ;}, open: function (event, ui) {// dialogSource = }}); // The val () function must be used to set the textarea value. The html () function cannot be used to set the dialog. find ("# content "). val (ss. find (". wrapperContent "pai.html (); dialog. find ("# divWidth" ).val(ss.css ("width"); dialog. find ("# divHeight" ).val(ss.css ("height"); dialog. dialog ("open") ;}); // defines the selected event $ ("*"). click (function (event, ui) {// alert (event. currentTarget. id); // each click is to cancel the selection first, and then the corresponding element is selected $ (". selected "). removeClass ("selected"); if (event. currentTarget. getAttribute ("class") = "shield") {// alert (1); $ (this ). parent (). find (". wrapperBorder "). addClass ("selected"); return false;}/* else if ($ (this ). hasClass ("componentWrapper") {// alert (2); $ (this ). find (". wrapperBorder "). addClass ("selected");} * // else {// $ (". wrapperBorder "). removeClass ("selected"); // only activate the first click, and then stop foaming // return false ;}); // adjust the size of the inner div by hour (". componentWrapper "). resizable ({autoHide: true, resize: function (event, ui) {// alert ($ (this ). width (); $ (this ). find (". wrapperContent ").css (" width ", $ (this ). width (); $ (this ). find (". wrapperContent ").css (" height ", $ (this ). height ());}});}});

Note:

1. To make the IDs of each dragged div different, a variable "bordNum" is set to identify it.

2. Each dragged div, that is, ss, needs to be set to Droppable again so that it can be dragged in the canvas.

3. to select a div with the mouse, you need to dynamically Add a style for the div. Also, after obtaining the object and adding a style dynamically, you must use "return false" to prevent event bubbling.

4. When dragging, you must take into account the scroll bar.

5. Set div to Resizable so that it can be dragged and adjusted.

 

3.3 keyboard actions

After the keyboard action is selected:

Move one pixel up;

Move one pixel down;

Move one pixel to the left;

Move one pixel to the right;

Delete.

Code:

$ (Document ). ready (function () {divFullScreen (); // full screen during page loading $ (window ). bind ('resize', function () {divFullScreen (); // maximized, The DIV size of the restored window changes with the hour, however, it is best to add a min-width to the DIV in CSS that is equal to html and the minimum width of the body .}); // Define the move div position event on the keyboard $ (document ). keydown (function (event) {var x = $ (". selected "). parent (). position (). top; // horizontal displacement var y = $ (". selected "). parent (). position (). left; // vertical shift switch (event. which) {// case 37: y = y-10; $ ("border_1" ).css ("left", y + "px"); break; case 37: if (y> = 1) {// alert (y); y = y-1; // alert (y); $ (". selected "Maid (" left ", y +" px ");} else {y = 0;} break; case 38: if (x> 1) {x = x-1; $ (". selected "Maid (" top ", x +" px ");} else {x = 0;} break; case 39: if (y <$ (" # pageAreaWrapper "). width ()-$ (". selected "). width () {y = y + 1; $ (". selected "pai.parent().css (" left ", y +" px ");} else {y = $ (" # pageAreaWrapper "). width ();} break; case 40: x = x + 1; $ (". selected "Maid (" top ", x +" px "); break; case 46: $ (". selected "). parent (). remove (); break; default: break;} // false is returned to stop the bubble, so that when you click the keyboard down key, the page does not move with return false ;});});