Use the jquery UI to drag and drop layout effects for CMS sites, killing table layouts in seconds

1 Implementation Effect

For people who have used a CMS system to make a website, it should be clear that the process of making a website is an important step in making a page layout. Currently, there are two ways to implement page layouts:table and div. Each of these two ways has its merits and demerits.

Table:

Advantages: Simple to use, layout using the table is logical, the concept and understanding is very simple, easy to make.

Disadvantage: Table layout is fixed, the layout effect of the comparison of the dead, some more special effects, cascading effects, such as more difficult to achieve.

Div:

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

Disadvantage: The operation is more complex, the front-end layout designers need to be familiar with the characteristics of div , cascading style and so on.

As you can see, the two layouts of table and Div are the pros and cons of each other. But at present , Div is becoming a mainstream design way, its layout effect is flexible, style novel characteristic also more and more favored. And what we're saying here is that if you want to use drag-and-drop to easily implement page layouts, that's not a div .

For example, you can drag the layout div into the layout area, use the mouse to drag and drop the position, you can select it, use the keyboard to move in all directions, and Delete the key to remove it. Alternatively, you can use the mouse to drag the lower right corner to change the size of the div.

Double-click a div , the Properties dialog box pops up . You can enter the width of the div , the height, and the contents of the div in the text area .

2 Practical Tools

The entire tool is made using jQueryUI . The production process was used to include the following members of the jQueryUI:

1) Accordion

Used to implement the left Maple menu, thediv Source is based here.

2) draggable

Drag-and-drop items are implemented using draggable .

3) droppable

The droppable is used to implement the layout release area.

4) Resizable

Resizable is used to implement Drag-and-drop settings for div sizes.

5) Dialog

Dialog The Properties dialog box that is used to create a double-click div .

3 Implementation Process

3.1 Add left folding navigation

Added left folding navigation, using the Accordion in jQueryUI, the effect

Code:

        Increase the folding effect $ ("#catalog"). Accordion ({heightstyle: "Fill"});//Make <li> tag elements draggable $ ("#catalog li"). Draggable ({ AppendTo: "Body",//is used to specify the container that the control ui.helper during the drag process, by default, Ui.helper uses the same container as the original defined draggable, which is its parent element. Default value  "Parent" Helper: How to display "clone"//when dragging elements. (If the function must return a value that is a DOM element) optional value: "Original", "Clone", function default  "original"});

3.2 Setting up the layout canvas

List items can be dragged, and now there is a place to receive them. The effect that we want to achieve is to drag from the list on the left and into the layout canvas area on the right, so to set the layout canvas area to the receive 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 the layout interface for 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>" + "</div>" + "</div>");//ss.text ( Ui.draggable.text ()). AppendTo (This), ss.appendto (this);//Get drag-in position var px = Ui.position.left;var py = ui.position.top;// Gets the absolute offset of the layout canvas Pagearea the entire page var pagearea_px = $ ("#pageArea") [0].offsetleft;//here Plus 73 is because the outerThe top position of the table for the layer is 73var pagearea_py = $ ("#pageArea") [0].offsettop + 73;//alert ("cart2_px=" + cart2_px + ", cart2_py=" + cart2_ PY);//Gets the scroll bar scrolling distance var scrollpx = $ ("#bodyOfPage"). ScrollLeft (); var scrollpy = $ ("#bodyOfPage"). ScrollTop (); To take into account the factors of the scrollbar setposition (SS, Px-pagearea_px + scrollpx, py-pagearea_py + scrollpy); Ss.draggable ({containment: "#pageAre Awrapper ", Scroll:false,stop:function (event, UI) {}});//double-click Div, edit div internal content 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"). CSS (' Width ', divwidth.val ()), ss.css (' Height ', divheight.val ()), Ss.find (". Wrappercontent"). CSS (' height ', divheight.val ( ); Ss.find (". Wrappercontent"). HTML (content.Val ());d Ialog.dialog ("Close");} Return Valid;},cancel:function () {Dialog.dialog ("close"),}},close:function () {//form[0].reset ();// Allfields.removeclass ("Ui-state-error");},open:function (event, UI) {//dialogsource =}});//Setting the value of textarea requires the Val () function, The HTML () function was not set successfully dialog.find ("#content"). Val (Ss.find (". Wrappercontent"). html ());d ialog.find ("#divWidth"). Val ( Ss.css ("width"));d Ialog.find ("#divHeight"). Val (ss.css ("height"));d Ialog.dialog ("Open");}); /define click to select Event $ ("*"). Click (Function (event, UI) {//alert (event.currentTarget.id);//Each Click is deselected first, and then the corresponding element is selected for $ (". 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 activates the first click, then stops bubbling//return false;}); /Resize the inner div to resize $ (". Componentwrapper") at the same time. Resizable ({AUtohide:true,resize:function (event, UI) {//alert ($ (this). width ()); Find (". Wrappercontent"). CSS ("width", $ ( This). Width ()): $ (this). Find (". Wrappercontent"). CSS ("height", $ (this). Height ());});});

Here you need to explain:

1. in order to make each of the dragged Div 's ID different , set a variable "bordnum "to identify.

2. each dragged out div, which is SS, needs to be set again to droppable, So that it can be dragged in the canvas as well.

3. in order to use the mouse to select a div, you need to dynamically add a style to the div , and pay attention to get the object and dynamically add the style after the " return False to prevent the event from bubbling .

4. When you just drag in, the position also takes into account the factors of the scroll bar .

5. set the div to resizable so that it can be dragged and resized .

3.3 Keyboard Action

Keyboard action is mainly selected after:

Move up one pixel;

Move down one pixel;

Move one pixel to the left;

Move one pixel to the right;

Delete.

Code:

$ (document). Ready (function () {divfullscreen ();//page loaded with Full screen $ (window). Bind (' Resize ', function () {divfullscreen ();//Maximize , restore the window large hour div size changes, but it is best to add a min-width to the div in CSS is equal to the minimum width of html,body. });//define keyboard move div position event $ (document). KeyDown (function (event) {var x = $ (". Selected"). Parent (). Position (). top;//Horizontal Displacement Var y = $ (". Selected"). Parent (). Position (). left;//Vertical Displacement 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"). Parent (). CSS ("left", y + "px");} else {y = 0; }break;case 38:if (x > 1) {x = x-1;$ (". Selected"). Parent (). CSS ("Top", x + "px");} else {x = 0;} Break;case 39:if (Y < $ ("#pageAreaWrapper"). Width ()-$ (". Selected"). Width ()) {y = y + 1;$ (". Selected"). Parent (). CSS (" Left ", y +" px ");} else {y = $ ("#pageAreaWrapper"). width (); Break;case 40:x = x + 1;$ (". Selected"). Parent (). CSS ("Top", x + "px"), Break;case 46:$ (". Selected"). Parent (). remove (); Break;default:break;} Returns false to stop bubbling so that the page does not move with the retur when you click the keyboard down arrown false;}); 

Use the jquery UI to drag and drop layout effects for CMS sites, killing table layouts in seconds