一、業務需求

1，在后臺的管理界面通過排序功能直接進入排序界面

2，在排序界面能夠人工的手動拖動需要排序的標題，完成對應的排序之后提交

3，在app或者是前端就有對應的排序實現了

二、頁面展示

將整體頁面效果展示出來之后如圖所示(頁面點擊確定之后的效果是與java后臺進行交互的)：

三、設計思路：

后臺:如果需要將排序的結果保存到數據庫，那么必須要修改數據庫中對應的起碼一個字段(排序的序號sort)，那么后臺需要至少接收的參數有sort和id兩個字段。我這邊采用的是將這兩個字段封裝到對象，并且采用集合的方式傳遞給后臺，因為對應的修改必須是針對數據庫中需要排序的所有數據的操作。當然可以根據不同的業務實施不同的排序方式

前端：a，實現拖拽功能；b，需要能夠提供實時的序列號sort和該序列號指定的id

四、前端設計：

1，下載插件：只需點擊超鏈接,下載drag.zip并解壓,就會自動轉為drag.js文件,引用即可

2，代碼實現:

A>頁面中代碼:

• ${movieParam.NAME }

B>點擊排序的時候觸發事件(需要能獲取到當前的序號和id值):

//點擊排序:1,將當前頁面裝到指定的div;2,給對應的兩個隱藏的input框添加name屬性,便于后臺接收;3,為sort的隱藏的input賦予sort序號值

functiongetSortList(){

$(".M_sortMain").css("display","block"); //遮罩頁面顯示

$(".sortOulMain").html($(".listMain").html()); //將當前頁面裝到指定的div

$("li").each(function(){var seq_attr = 'movieParams['+$(this).index()+'].sort';var id_attr = 'movieParams['+$(this).index()+'].id';

$(this).children(".seqSort").attr('name',seq_attr); //為序號框添加name屬性

$(this).children(".seqSort").val($(this).index()) //為sort的隱藏的input賦予sort序號值

$(this).children(".idSort").attr('name',id_attr); //為id框添加name屬性

})

}

C>拖拽效果的實現,引用了提供的drag.js

//排序事件中的拖拽事件

$('.sortOulMain').DDSort({

target:'li',

floatStyle: {'border': '1px solid #ccc','background-color': '#fff','cursor': 'move'},//每次拖拽完成之后都會執行的函數

up: function() {

$("li").each(function(){

$(this).children(".seqSort").val($(this).index()); //改變全新的sort隱藏的input的序號值

})

}

});

五、后臺設計：

后臺采用的就是比較傳統的SSM框架了,主要就是對接收的參數的處理:

A>SpringMVC中只需要注意對于參數的接收必須按照指定的name對應即可(這里list集合中參數的封裝就不再強調了):

@RequestMapping("editSeq")public ModelAndView editSeq(MovieParamListForm movieParamList)throwsException{//判空操作這里省略了

movieParamService.editSeq(movieParamList.getMovieParams());

}

B>Service層的處理省略了,主要是對movieParam中的id和sort兩個字段的操作,直接跳到Mybatis:

update t_paramssort=#{var.sort}where id=#{var.id}

C>如果這時候發現自己的SQL寫的沒有問題但是在執行的時候控制臺還是報錯了的話，那么必須要在連接數據庫的時候加上這樣一段代碼就行了：allowMultiQueries=true這個是在操作數據庫批量修改時數據庫的一個問題

總結

以上是生活随笔為你收集整理的java 企业信息门户 拖拽排版_web中拖拽排序与java后台交互实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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