滑鼠拖曳實作DIV排序範例程式碼_jquery

先上效果圖：
 
對比傳統的排序，這是一個很不錯的嘗試，希望對大家有啟發。

大家可以參考我的上一篇部落格文章：http://www.jb51.net/article/42087.htm

html部分：

複製程式碼 程式碼如下:

• 
  
  
  

  指標：

  
  

  
  注意：可以透過拖曳來改變指標順序（不含任務開始時間和任務結束時間指標）。
  

  
  序號：1
  指標名稱：
  時限： 分鐘
  預警時間：分鐘
  

  
  

  
  
  

  
  

  
  

  序號：2

  
  指標名稱：
  時限： 分鐘
  預警時間：分鐘
  

  
  

  
  
  
  

JS部分：

複製程式碼 程式碼如下:

//添加指标
function addevaluate(){
var n = $(".evaluate_name").size();
var html = '';
html = "

序号："+n+" 指标名称：";
html += " 时限： 分钟";
html += " 预警时间：分钟";
html += "

";
$("div[name=processdiv]").append(html);
//使div可以拖曳
$("div[name=processdiv]").sortable( {
update: function (event, ui) {
evaluaterefresh();
}
});
//指標重新排序
evaluaterefresh();
//指標重新排序
evaluaterefresh();
}

//移除指標
function evaluatemove(n){
$("#div_" n "").remove();
evaluaterefresh();
}
}

//移除指標後重新編號
function evaluaterefresh(){
var count=$('.evaluate_name').length-2;
for(var i=0;ivar j = i 2;
$('div[name="processdiv"] div:eq(' i ') input:eq(0)').attr("name" ,"index_name_" j);
$('div[name="processdiv"] div:eq(' i ') input:eq(1)').attr("name","index_limit_time_" j);
$('div[name="processdiv"] div:eq(' i ') input:eq(2)').attr("name","index_alert_time_" j);
$('div [name="processdiv"] div:eq(' i ') input:eq(3)').attr("name","index_description_" j);
$('div[name="processdiv"] div:eq(' i ')').attr("title","指標" j);
$('div[name="processdiv"] div:eq(' i ') label:eq(0 )').html("序號：" j);
}

//給最後一條固定名稱的指標設定序號
var lastcount;
if(count==0 | | count=='0'){
lastcount = 2;
}else {
lastcount = count 2;
}

$('#lastevaluate input:eq(0 )').attr("name","index_name_" lastcount);
$('#lastevaluate input:eq(1)').attr("name","index_limit_time_" lastcount);
$( '#lastevaluate input:eq(2)').attr("name","index_alert_time_" lastcount);
$('#lastevaluate input:eq(3)').attr("name","index_description_" lastcount);
$('#lastevaluate').attr("title","指標" lastcount);
$('#order').html('');
$('# order').html("序號：" lastcount);
}

//保存任務類型和指標資料到資料庫
function evaluatesave(){
evaluaterefresh();
var task_name=$("#sort_type").val();
var task_remark=$("#sort_remark").val();
var task_id = $("#task_id").val( );
var count = $(".evaluate_name").size();
if(task_name.trim()==""||task_name.trim()==null){
jAlert ("任務型別名稱不能為空", "提示");
return ;
}
if(task_name.length>10){
jAlert("任務類型字數最多為10個字", "提示");
return ;
}
var evaluate_name = new Array();
var evaluate_limit = new Array();
var evaluate_alert = new Array()
var evaluate_desc = new Array();
for(var i=1;i evaluate_name[i] = $("input[name='index_name_" i "'] ").val();
if(evaluate_name[i].trim()==""||evaluate_name[i]==null){
jAlert("指標名稱不能為空", "提示");
return ;
}
evaluate_limit[i] = $("input[name='index_limit_time_" i "']").val();
if(evaluate_limit[i] .trim()==""||evaluate_limit[i]==null){
jAlert("指標時限不能為空", "提示");
return ;
}else if(isNaN (evaluate_limit[i].trim())){
jAlert("指標時限必須全是數字", "提示");
return ;
}
evaluate_alert[i] = $( "input[name='index_alert_time_" i "']").val();
if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){
jAlert("指標預警時間不能為空", "提示");
return ;
}else if(isNaN(evaluate_alert[i].trim())){
jAlert("指標預警時間必須全數", "提示");
return ;
}
evaluate_desc[i] = $("input[name='index_description_" i "']").val();
}
var indexname = evaluate_name.join('-');
var indexname = evaluate_name.join('-');
var indexname = evaluate_name.join('-');
var indexlimit = evaluate_limit.join('-');
var indexalert = evaluate_alert.join('-');
var indexalert = evaluate_alert.join('-''); >var indexdesc = evaluate_desc.join('-');
$.ajax({
url:"/SortsManagement/exectute_evaluate_save",
type:"POST",
data:{
data:{ task_icon:initializationData.filepath,
task_name:task_name,
task_id:task_id,
task_remark:task_remark,
count:count,
indexname:indexname,. 🎜>indexalert:indexalert,
indexdesc:indexdesc
},
dataType:"text",
success:function(result){
if(result==1){
alert("新增成功");
sorts_list();
$.selfalerts._hide();
}else{
alert("新增不成功，請重新嘗試");
return false;
}
}

});
}

css部分： 代碼如下:

/*每個指標*/
.eBody{
overflow:hidden;
背景：淺灰色；
寬度：700px;
左邊距：55px；
邊框半徑：5px;
邊距底部：10px;
}

.eMain{
顏色：#001F69;
float:left;font-family: '微軟雅黑';
字體樣式：繼承；
字體粗細：繼承；
行高：2.2;
左邊距：10px;
文字對齊：左；
寬度：550px ;
}

/*使用提示字*/
.eInfo{
color:red;font-size:12px;
}
.eNumber{
float:left;
左邊距：10px;
}

.eName{
float:left;width:150px
}

.Alert, . {
float:left;width:50px;文字對齊：居中；
}

.eMinute{
float:left;margin-left:3px;
}
}