• 王东峰主持召开河北雄安新区规划建设工作领导小组会议 2019-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18
  • 欢迎访问

    云南11选五走势图:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    云南11选五走势图500期 www.a-mcl.com 最近的项目中涉及到了用户个性化定制首页的需求,用户要求可以随意拖动首页??榈奈恢?,来实现个性化的布局。本文讲解如何使用jquery和PHP实现拖动布局并将拖动后的布局位置保存到数据库。

    查看演示DEMO 下载源码

    很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动??榈奈恢?,也就是说拖动后各??榈呐判蛭恢眯畔⑹羌锹荚诳突Ф说腸ookie里的。当用户清空客户端的cookie或浏览器的cookie过期后,再次访问页面时,发现布局又还原成最初的状态。这种cookie记录的方式使用简单,但不适合像个人中心、管理系统主页的要求。

    本例实现的效果:

    • 通过拖动随意布局页面???。
    • 记录拖动后??榈奈恢?,并记录到数据库中。
    • 页面永久性布局,用任意浏览器在任意时候打开,页面布局不变。(除非用户再次更改??榈呐判?,跟cookie没有关系)。

    原理

    采用jquery uisorttable拖动排序插件实现拖动效果。

    将拖动后的??榈奈恢猛ü齛jax传给服务端PHP程序。

    PHP程序处理位置信息后,更新数据库中相应的字段内容。

    XHTML

    Module:1

    1

    ...

    DIV#loader用于显示提示信息,如loading...,#orderlist是一个隐藏域,用于记录??榈呐判蛑??!?..”表示循环了n个DIV.modules,具体生成的代码在后面会讲到。

    CSS

    #module_list{margin-left:4px}
    .modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9;
     background:#e8f5fe}
    .m_title{height:24px; line-height:24px; background:#afc6e9}
    #loader{height:24px; text-align:center}

    简单,关键是要给.modules一个想左浮动的样式float:left。

    jQuery

    $(function(){
    	$(".m_title").bind('mouseover',function(){
    		$(this).css("cursor","move")
    	});
    	
        var $show = $("#loader"); 
        var $orderlist = $("#orderlist");
    	var $list = $("#module_list");
    	
    	$list.sortable({
    		opacity: 0.6, //设置拖动时候的透明度
    		revert: true, //缓冲效果
    		cursor: 'move', //拖动的时候鼠标样式
    		handle: '.m_title',  //可以拖动的部位,??榈谋晏獠糠?
    		update: function(){
    			 var new_order = [];
                 $list.children(".modules").each(function() {
                    new_order.push(this.title);
                 });
    			 var newid = new_order.join(',');
    			 var oldid = $orderlist.val();
    			 $.ajax({
                    type: "post",
                    url: "update.php", //服务端处理程序
                    data: { id: newid, order: oldid },   //id:新的排列对应的ID,order:原排列顺序
                    beforeSend: function() {
                         $show.html(" 正在更新");
                    },
                    success: function(msg) {
                         //alert(msg);
    					 $show.html("");
                    }
                 });
    		}
    	});
    });

    拖动排序的动作都写在$list.sortable({...})里面,参数设置和方法请看代码的注释。juery ui的sortable插件提供了很多方法和参数配置,详情请查看//jqueryui.com/demos/sortable

    拖动完成要执行一个update方法,该方法需要将拖动后排序的位置通过ajax提交给后台处理。

    var new_order = [];
    $list.children(".modules").each(function() {
         new_order.push(this.title);
    });
    var newid = new_order.join(',');
    var oldid = $orderlist.val();

    说明:循环每个???modules,获取拖动排序后每个??榈氖粜詔itle值,将值通过逗号连接成一个字符串。原来的未拖动之前的排序值从隐藏域orderlist中获取。

    获取排序值后,就是通过ajax和后台程序交互了。

    PHP

    update.php接收前端ajax通过POST提交过来的两个参数,及排序前的值和排序后的值,将这连个值进行对比,如果不相等,则更新数据库中的排序字段,完成了拖动排序后的及时保存。

    include_once("connect.php");//连接数据库
    $order = $_POST['order'];
    $itemid = trim($_POST['id']);
    if (!empty ($itemid)) {
    	if ($order != $itemid) {
    		$query = mysql_query("update sortlist set sort='$itemid' where id=1");
    		if ($query) {
    			echo $itemid;
    		} else {
    			echo "none";
    		}
    	}
    }

    首页index.php

    再回到展示布局的首页index.php。index.php通过连接数据库读取??榈呐判蛐畔?,并将各??橄允境隼?。

    首先别忘了加载jquery库和jquery ui的sortable拖动排序插件。

    
    

    读取数据库的排序字段值。

    include_once("connect.php");
    
    $query=mysql_query("select * from sortlist where id=1");
    if($rs=mysql_fetch_array($query)){
       	$sort=$rs['sort'];
    }
    $sort_arr=explode(",",$sort);
    $len=count($sort_arr);

    循环显示各???。

    Module:

    诚然,真正的拖动排序结果的保存都跟每个用户信息相关联,所以数据库的结构设计方面大家可以自行解决,尽情发挥吧。

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • 王东峰主持召开河北雄安新区规划建设工作领导小组会议 2019-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18