1、利用gridly进行拖拽的效果实现
<ul class="ptlt-app-lst ui-sortable cog gridly" id="dragable">
<%
for (int i = 0; i < AppCardEntityList.size(); i++) {
%>
<li class="cog-card ui-sortable-handle">
<input type="hidden" id="inputValue" value="<%=AppCardEntityList.get(i).getUsersSettingsId()%>"></input>
//TODO
//界面展示内容
</li>
<%
}
%>
</ul>
2、回调函数
var gridly_set = {
callbacks:{ reordering: reordering , reordered: reordered }
};
$('.gridly').gridly(gridly_set);
function reordering(){
console.log('reordering');
}
function reordered(){
console.log('reordered');
setTimeout(getChangedValue,300);
}
function getChangedValue(){
var dom = $('.gridly li');
var tmp = {};
var col_base_num = 10000;
dom.each(function(){
var self = $(this);
var left_num = self.css('left').replace(/px/,'');
var top_num = self.css('top').replace(/px/,'');
var top_tmp = parseInt(top_num) + 1;
var weight = parseInt(left_num) + (top_tmp*col_base_num);
var changedDate = self.find('input').val();
tmp[weight] = changedDate;
});
var i;
var arr = [];
for(i in tmp){
var r = tmp[i];
arr.push(r);
}
document.getElementById("changedData").value = arr ;
console.log(arr);
}
3、后台获取这个顺序
String changedData = ParamUtil.getString(renderRequest, "changedData");
String[] sortData = changedData.split(",");