修改图集编辑页实现图集图片拖拽排序。以前没用过，现在发现原来图集上传图片后是不能排序的，刚好今天用到，就修改了下。

    打开模板文件 dede/templets/album_edit.htm

    头部引用排序组件 Sortable.js，（不得不说这组件太方便了）

    也可以使用cdn引用

上图的网址可以自行下载 js 文件，之后放入相应的文件夹引用。

    开始修改。

    查找     <div id="thumbnailsEdit">

    可以看到下面这段用于输出已上传的图集图片列表的代码

 <?php
       $j = 1;
       if($imgurls!=""){
       	 $dtp = new DedeTagParse();
       	 $dtp->LoadSource($imgurls);
       	 if(is_array($dtp->CTags))
       	 {
       	 	 foreach($dtp->CTags as $ctag)
       	 	 {
       	 	 	 if($ctag->GetName()=="img")
       	 	 	 {
                     $bigimg = trim($ctag->GetInnerText());
                     if($ctag->GetAtt('ddimg') != $bigimg && $ctag->GetAtt('ddimg')!='')
                     {
                     		$litimg = $ctag->GetAtt('ddimg');
                     }
                     else
                     {
                     	 $litimg = 'swfupload.php?dopost=ddimg&img='.$bigimg;
                     }
                     
                     $fhtml = '';
	   $fhtml .= "<div class='albCt albEdit' id='albold{$j}'>
";
	   $fhtml .= "	<input type='hidden' name='imgurl{$j}' value='{$bigimg}' />
";
	   $fhtml .= "	<input type='hidden' name='imgddurl{$j}' value='{$litimg}' />
";
	   $fhtml .= "	<img src='{$litimg}' width='120' /><a href="javascript:delAlbPicOld('$bigimg', $j)">[删除]</a>
";
		 $fhtml .= "	<div style='margin-top:10px'>注释：<input type='text' name='imgmsg{$j}' value='".$ctag->GetAtt('text')."' style='width:190px;' /></div>
";
		 $fhtml .= "	<div style='margin-top:10px'>更换：<input type='file' name='imgfile{$j}' size='18' style='width:190px' /></div>
";
	   $fhtml .= "</div>
";
       	 	 	 	 echo $fhtml;
       	 	 	 	 $j++;
       	 	 	 }
       	 	 }
       	 }
       	 $dtp->Clear();
       }
       ?>

    然后把上面这一段修改成下方的（直接复制代替）

    <?php
       $j = 1;
       if($imgurls!=""){
       	 $dtp = new DedeTagParse();
       	 $dtp->LoadSource($imgurls);
       	 if(is_array($dtp->CTags))
       	 {
       	 	 foreach($dtp->CTags as $ctag)
       	 	 {
       	 	 	 if($ctag->GetName()=="img")
       	 	 	 {
                 $bigimg = trim($ctag->GetInnerText());
                 if($ctag->GetAtt('ddimg') != $bigimg && $ctag->GetAtt('ddimg')!='')
                 {
                        $litimg = $ctag->GetAtt('ddimg');
                 }
                 else
                 {
                     $litimg = 'swfupload.php?dopost=ddimg&img='.$bigimg;
                 }

                 $fhtml = '';
                 $fhtml .= " <div class='albCt albEdit albpx' id='albold{$j}'>
";
                 $fhtml .= " <input class='pxurl' type='hidden' name='imgurl{$j}' value='{$bigimg}' />
";
                 $fhtml .= " <input class='pxdurl' type='hidden' name='imgddurl{$j}' value='{$litimg}' />
";
                 $fhtml .= " <img src='{$litimg}' width='120' /><a href="javascript:delAlbPicOld('$bigimg', $j)">[删除]</a>
";
                 $fhtml .= " <div style='margin-top:10px'>注释：<input class='pxtext' type='text' name='imgmsg{$j}' value='".$ctag->GetAtt('text')."' style='width:190px;' /></div>
";
                 $fhtml .= " <div style='margin-top:10px'>更换：<input class='pxfile' type='file' name='imgfile{$j}' size='18' style='width:190px' /></div>
";
                 $fhtml .= "</div>
";
                 echo $fhtml;
                 $j++;
       	 	 	 }
       	 	 }
       	 }
       	 $dtp->Clear();
       }
       ?>

    接着在模板底部添加js用于处理排序，写排序算法，就直接每次拖拽排序的时候重新给对应的id赋值。

<script language='javascript'>
Sortable.create(document.getElementById('thumbnailsEdit'), {
 animation: 150, //动画参数
 onAdd: function (evt) {   //拖拽时候添加有新的节点的时候发生该事件
 },
 onUpdate: function (evt) {  //拖拽更新节点位置发生该事件
 },
 onRemove: function (evt) {   //删除拖拽节点的时候促发该事件
 },
 onStart: function (evt) {  //开始拖拽出发该函数
 },
 onSort: function (evt) {  //发生排序发生该事件
 },
 onEnd: function (evt) { //拖拽完毕之后发生该事件
	var tppx = document.querySelectorAll(".albpx");
	var tppx2 = document.querySelectorAll(".pxurl");
	var tppx3 = document.querySelectorAll(".pxdurl");
	var tppx4 = document.querySelectorAll(".pxtext");
	var tppx5 = document.querySelectorAll(".pxfile");
	var dedelen = tppx.length;
	for (i=0; i<dedelen; i++) {
		var len2 = i+1;
		tppx[i].id= "albold" + len2;
		tppx2[i].name ="imgurl" + len2;
		tppx3[i].name ="imgddurl" + len2;
		tppx4[i].name ="imgmsg" + len2;
		tppx5[i].name ="imgfile" + len2;
	}
 },
});
</script>

    保存，结速完成！赶紧试试，让你方便的不敢想象。