Mouse dragging to implement DIV sorting sample code_jquery

Let’s start with the renderings:

Compared with traditional sorting, this is a very good attempt, I hope it can inspire everyone.

You can refer to my last blog post: http://www.jb51.net/article/42087.htm

html part:

Copy code The code is as follows:

> ;

• 
  
  
  

  Indicator:

  
  

  
  Note: You can change the order of indicators by dragging (excluding task start time and task end time indicators).
  

  
  Serial number: 1
  Indicator name:
  Time limit: minutes
  Alert time: minutes
  

  
  

  
  
  

  
  

  
  

  Serial number: 2

  
  Indicator name:
  Time limit: minutes
  minutes
  

  
  

  
  
  
  

< ;/body>

JS part:

Copy code The code is as follows:

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

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

";
$("div[name=processdiv]").append(html);
//Make div draggable
$("div[name=processdiv]").sortable( {
update: function (event, ui) {
evaluaterefresh();
}
});
//Indicator reordering
evaluaterefresh();
}

//Remove indicator
function evaluatemove(n){
$("#div_" n "").remove();
evaluaterefresh();
}

//Renumber after removing the indicator
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","Indicator" j);
$('div[name="processdiv"] div:eq(' i ') label:eq(0 )').html("Serial number: " j);
}

//Set the serial number for the last indicator with a fixed name
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","Indicator" lastcount);
$('#order').html('');
$('# order').html("Serial number:" lastcount);
}

//Save task type and indicator data to the database
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 ("Task type name cannot be empty", "Prompt");
return ;
}
if(task_name.length>10){
jAlert("The maximum number of words for task type is 10 characters ", "hint");
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("Indicator name cannot be empty", " Tip");
return ;
}
evaluate_limit[i] = $("input[name='index_limit_time_" i "']").val();
if(evaluate_limit[i ].trim()==""||evaluate_limit[i]==null){
jAlert("Indicator time limit cannot be empty", "Prompt");
return ;
}else if( isNaN(evaluate_limit[i].trim())){
jAlert("Indicator time limit must be all numbers", "Tip");
return ;
}
evaluate_alert[i] = $ ("input[name='index_alert_time_" i "']").val();
if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){
jAlert("Indicator alert time cannot be empty", "Prompt");
return ;
}else if(isNaN(evaluate_alert[i].trim())){
jAlert("Indicator alert The time must be all numbers", "hint");
return ;
}
evaluate_desc[i] = $("input[name='index_description_" i "']").val();
}
var indexname = evaluate_name.join('-');
var indexlimit = evaluate_limit.join('-');
var indexalert = evaluate_alert.join('-');
var indexdesc = evaluate_desc.join('-');
$.ajax({
url:"/SortsManagement/exectute_evaluate_save",
type:"POST",
data:{
task_icon:initializationData.filepath,
task_name:task_name,
task_id:task_id,
task_remark:task_remark,
count:count,
indexname:indexname,
indexlimit:indexlimit,
indexalert:indexalert,
indexdesc:indexdesc
},
dataType:"text",
success:function(result){
if(result==1){
alert("Added successfully");
sorts_list();
$.selfalerts._hide();
}else{
alert("Added unsuccessful, please try again");
return false;
}
}
});
}

css part:

Copy the code The code is as follows:

/*每条指标*/
.eBody{
overflow:hidden;
background:lightgray;
width:700px;
margin-left:55px;
border-radius:5px;
margin-bottom:10px;
}

.eMain{
color:#001F69;
float:left;font-family: '微软雅黑';
font-style: inherit;
font-weight: inherit;
line-height: 2.2;
margin-left: 10px;
text-align: left;
width: 550px;
}

/*使用提示语*/
.eInfo{
color:red;font-size:12px;
}
.eNumber{
float:left;
margin-left:10px;
}

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

.eLimit, .eAlert{
float:left;width:50px;text-align:center;
}

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