仿QQ空间相册拖动排序保存相册顺序

 

       看到论坛里有人问有没有人拔仿QQ空间相册拖动排序保存相册顺序，直觉这应该不是很难的东西，为什么我们的第一反应总是要去扒，不能先自己思考下怎么做，做原创不好么？虽然可以看看别人好的技术，但是凡事都“扒”，这也是一种悲哀，不单是个人的悲哀吧。

      扯多了。于是自己想了下。之前在论坛里也看见有高手写过拖拽的程序，自适应自识别位置，两个div调换位置。自己写了个，用了jquery，拖动功能是用的自己前面写的一个插件。

      图片的信息是存数据库，用一个字段（sort_key）保存图片的排序信息，数值小排在前面。

      前端拖动，更换位置时调换相应的div的left和top值，以及排序的sortkey的值，拖动完成后ajax后端保存。程序很简单。

      最后，在识别拖动的过程中，是遍历数组查询是否两个应当互换位置了，这个算法有待优化。

 

 

 

前端页面：http://ftpwfc.d185.webidcc.cn/test/mycss/

 

MySQL：

CREATE TABLE IF NOT EXISTS `images` (
  `id` int(11) NOT NULL auto_increment,
  `path` varchar(200) character set utf8 NOT NULL,
  `sort_key` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

 

后台PHP：

显示图片：get.msg.php

<?php
include 'con_sql.php';
con_sql( $sqlConfig1 );

switch( $_POST['type'] ){
    case 'imageList':
        echo get_image_list();
        break;
}


//获取图片列表
function get_image_list(){
    $sql = "select id,path,sort_key from images order by sort_key";
    $result = mysql_query($sql);
    $resultNum = mysql_num_rows($result);
    for($n = 0; $n < $resultNum; $n ++){
        $resultArr = mysql_fetch_row($result);
        $file['id'][$n] = $resultArr[0];
        $file['file'][$n] = $resultArr[1];
        $file['num'][$n] = $n;
    }

    return json_encode($file);
}

?>

 

 

保存排序：set.msg.php

<?php
include 'con_sql.php';
con_sql( $sqlConfig1 );

switch( $_POST['type'] ){
    case 'imageList':
        echo set_image_list($_POST['content']);
        break;
}


//保存图片列表
function set_image_list($content){
    $num = count($content['sortKey']);
    for($n = 0; $n < $num; $n ++){
        $sql = "update images set sort_key = '".$content['sortKey'][$n]."' where id = '".$content['fileId'][$n]."'";
        mysql_query($sql);
    }

    return $num;
}

?>