1?實現效果

? ? 對于使用過CMS系統制作網站的人應該都清楚，制作網站過程有一個重要的步驟就是制作頁面布局。目前，實現頁面布局有兩種方式：table與div。這兩種方式各有其優劣之處。

? ? Table：

? ? 優勢：使用簡單，使用表格進行布局順理成章，概念和效果圖理解起來很簡單，制作也方便。

? ? 劣勢：表格布局比較固定，布局效果控制的比較死，一些較為特殊的效果、層疊效果等比較難以實現。

? ? Div：

? ? 優勢：布局效果靈活，div能輕易的控制布局位置，浮動效果等。

? ? 劣勢：操作較為復雜，需要前端布局設計人員對div的特性、層疊樣式等都較為熟悉。

? ? 可以看出，其實table和div這兩種布局方式是互為優劣的。但是目前來說div越來越成為一種主流設計方式，其布局效果靈活、樣式新穎的特點也越來越受到青睞。而且這里我們所講的，如果你想使用拖拽的方式輕松實現頁面布局，那非div不可。如圖：

? ? 如下圖，可以將布局div拖入布局區，使用鼠標拖拽隨意移動其位置，同時可以將其選中，使用鍵盤進行各個方向的位置移動，還可以delete鍵將其刪除。另外，還可以使用鼠標拖拽其右下角改變div的大小。

? ? 雙擊某個div后，會彈出屬性對話框。可以輸入div的寬度，高度，還可以在文本區中加入div中的內容。

2?使用工具

? ? 整個工具使用jQueryUI來制作。制作過程用到了jQueryUI的包含的以下成員：

? ? 1)?Accordion

? ? 用于實現左側楓葉菜單，div來源基于此處。

?

? ? 2)?Draggable

? ? 拖拽項即使用Draggable來實現。

?

? ? 3)?Droppable

? ? Droppable用來實現布局釋放區。

?

? ? 4)?Resizable

? ? Resizable用來實現對div大小的拖拽設置效果。

?

? ? 5)?Dialog

? ? Dialog用來制作雙擊div時彈出的屬性對話框。?

?

3?實現過程

3.1?增加左側折疊導航

? ? 增加左側折疊導航，用到了jQueryUI中的Accordion，效果如圖：

? ? 代碼：

//增加折疊效果$("#catalog").accordion( {heightStyle : "fill"});//使<li>標簽中的元素可拖拽$("#catalog li").draggable( {appendTo : "body",//用來指定控件在拖拽過程中ui.helper的容器, 默認情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.默認值 "parent"helper : "clone" //拖拽元素時的顯示方式。（如果是函數，必須返回值是一個DOM元素）可選值："original", "clone", Function默認值 "original"});

3.2?設置布局畫布

? ? 列表項已經可以拖拽了，現在還需要有地方可以接收這些元素。我們要實現的效果是，從左側列表拖出，放入右面的布局畫布區域，因此要將布局畫布區域設置為接收區，jQueryUI提供了Droppable來實現這個效果：

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 = "";//生成布局界面的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);//獲取拖入位置var px = ui.position.left;var py = ui.position.top;//獲取布局畫布pageArea的在整個頁面的絕對偏移量var pageArea_px = $("#pageArea")[0].offsetLeft;//此處加上73是因為外層的table的top位置為73var pageArea_py = $("#pageArea")[0].offsetTop + 73;//alert("cart2_px=" + cart2_px + ", cart2_py=" + cart2_py);//獲取滾動條滾動距離var scrollpx = $("#bodyOfPage").scrollLeft();var scrollpy = $("#bodyOfPage").scrollTop();//剛拖入時的位置，要考慮到滾動條的因素setPosition(ss, px - pageArea_px + scrollpx, py - pageArea_py + scrollpy);ss.draggable( {containment : "#pageAreaWrapper",scroll : false,stop : function(event, ui) {}});//雙擊div，編輯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").css('width', divWidth.val());ss.css('height', divHeight.val());ss.find(".wrapperContent").css('height', divHeight.val());ss.find(".wrapperContent").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 = }});//設置textarea的值需要用val()函數，html()函數設置不成功dialog.find("#content").val(ss.find(".wrapperContent").html());dialog.find("#divWidth").val(ss.css("width"));dialog.find("#divHeight").val(ss.css("height"));dialog.dialog( "open" );} );//定義點擊選中事件$("*").click(function(event, ui) {//alert(event.currentTarget.id);//每次點擊都是先取消選中，然后再讓相應元素被選中$(".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"); //}//只激活第一次點擊，之后停止起泡//return false;});//調整大小時同時將內層div大小調整$(".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());}});}});

? ? 這里需要說明：

????1.?為了使每個被拖出來的div的id都不一樣，設置了一個變量“bordNum”來標識。

????2.?每個被拖出來的div，也就是ss，需要再次設置為Droppable，才能使其在畫布中也能夠被拖動。

? ? 3.?為了可以使用鼠標選中某個div，需要為div動態增加樣式，而且要注意獲取對象并動態增加了樣式之后就要通過“return?false”來阻止事件冒泡。

? ? 4.?剛拖入時，放入位置還要考慮到滾動條的因素。

????5.?通過設置div為Resizable使其可以被拖拽調整大小。

?

3.3?鍵盤動作

? ? 鍵盤動作主要有選中后：

? ? 向上移動一個像素；

? ? 向下移動一個像素；

? ? 向左移動一個像素；

? ? 向右移動一個像素；

? ? 刪除。

? ? 代碼：

$(document).ready(function() {divFullScreen();//頁面加載時全屏$(window).bind('resize', function() {divFullScreen();//最大化，還原窗口大小時DIV尺寸跟著變化，不過最好在CSS里給這個DIV加個min-width等于html,body的最小寬度。});//定義鍵盤移動div位置事件$(document).keydown(function(event) {var x = $(".selected").parent().position().top;//水平方向位移var y = $(".selected").parent().position().left;//垂直方向位移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;}//返回false是為了停止冒泡，以便點擊鍵盤向下鍵時頁面不隨著移動return false;});});

總結

以上是生活随笔為你收集整理的利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。