修改圖集編輯頁實現(xiàn)圖集圖片拖拽排序。以前沒用過，現(xiàn)在發(fā)現(xiàn)原來圖集上傳圖片后是不能排序的，剛好今天用到，就修改了下。

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

    頭部引用排序組件 Sortable.js，（不得不說這組件太方便了）

    也可以使用cdn引用

上圖的網(wǎng)址可以自行下載 js 文件，之后放入相應(yīng)的文件夾引用。

    開始修改。

    查找     <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();
       }
       ?>

    然后把上面這一段修改成下方的（直接復(fù)制代替）

    <?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用于處理排序，寫排序算法，就直接每次拖拽排序的時候重新給對應(yīng)的id賦值。

<script language='javascript'>
Sortable.create(document.getElementById('thumbnailsEdit'), {
 animation: 150, //動畫參數(shù)
 onAdd: function (evt) {   //拖拽時候添加有新的節(jié)點的時候發(fā)生該事件
 },
 onUpdate: function (evt) {  //拖拽更新節(jié)點位置發(fā)生該事件
 },
 onRemove: function (evt) {   //刪除拖拽節(jié)點的時候促發(fā)該事件
 },
 onStart: function (evt) {  //開始拖拽出發(fā)該函數(shù)
 },
 onSort: function (evt) {  //發(fā)生排序發(fā)生該事件
 },
 onEnd: function (evt) { //拖拽完畢之后發(fā)生該事件
	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>

    保存，結(jié)速完成！趕緊試試，讓你方便的不敢想象。