Drag the mouse to implement DIV sorting sample code

  • 2020-03-26 21:24:56
  • OfStack

First on the renderings:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/2013101416562511.gif? 2013914165644 ">  
This is a good attempt to compare to the traditional sort, and I hope it will inspire you.

You can refer to my last post:

HTML part:
 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<link href="css/create.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui.js" type="text/javascript"></script> 
<script src="js/create.js" type="text/javascript"></script> 
</head> 
<body> 
<form> 
<ul> 
<li > 
<div id="liuc" style="display:block;"> 
<div class='leftdiv' style="height:60px"> Indicators: </div> 
<div class="eMain" > 
<input style="float:left;" type="button" name="insert" class="selfpopup_button" onclick="addevaluate()" value=" add "> <span class="eInfo">  Note: you can drag to change the order of metrics (excluding task start time and task end time metrics). </span> 
<div title=" indicators 1" class="eBody"> 
<label class="eNumber"> Serial number: 1 </label> 
<label style="float:left"> Index name: </label><input class="eName evaluate_name eject_input_text" name="index_name_1" type="text" value=" Task start time "/> 
<label style="float:left">  Time: </label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_1" type="text" /><span class="eMinute"> minutes </span> 
<label style="float:left">  Warning time: </label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_1" type="text" /><span class="eMinute"> minutes </span> 
</div> 
<div action-type="processdiv" id="processdiv" name="processdiv" style="width:800px;"> 

</div> 
<div title=" indicators 2" id="lastevaluate" class="eBody"> 
<div class="eNumber" id="order"> Serial number: 2</div> 
<label style="float:left" >  Index name: </label><input class="eName evaluate_name eject_input_text" name="index_name_2" type="text" value=" End time "/> 
<label style="float:left">  Time: </label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_2" type="text" /><span class="eMinute"> minutes </span> 
<label style="float:left">  Warning time: </label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_2" type="text" /><span class="eMinute"> minutes </span> 
</div> 
</div> 
</div> 
</li> 
</ul> 
</form> 
</body> 
</html> 

JS:
 
//Add indicators
function addevaluate(){ 
var n = $(".evaluate_name").size(); 
var html = ''; 
html = "<div title='"+n+"' class='eBody' id='div_"+n+"'><label class='eNumber'> Serial number: "+n+"</label><label style='float:left;'>  Index name: </label><input class='eName evaluate_name eject_input_text' name='index_name_"+n+"' type='text'/>"; 
html += "<label style='float:left;'>  Time: </label> <input class='eLimit evaluate_limit eject_input_text' name='index_limit_time_"+n+"' type='text'/><span class='eMinute'> minutes </span>"; 
html += "<label style='float:left;'>  Warning time: </label><input class='eAlert evaluate_alert eject_input_text' name='index_alert_time_"+n+"' type='text'/><span class='eMinute'> minutes </span>"; 
html += "<input type='button' name='evaluatemove' value=' remove ' onclick='evaluatemove("+n+")'/></div>"; 
$("div[name=processdiv]").append(html); 
//Make div drag-and-drop
$("div[name=processdiv]").sortable({ 
update: function (event, ui) { 
evaluaterefresh(); 
} 
}); 
//Index reordering
evaluaterefresh(); 
} 

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

//Renumber the index after removing it
function evaluaterefresh(){ 
var count=$('.evaluate_name').length-2; 
for(var i=0;i<count;i++){ 
var 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"," indicators "+j); 
$('div[name="processdiv"] div:eq('+i+') label:eq(0)').html(" Serial number: "+j); 
} 

//Set the ordinal number for the last index 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"," indicators "+lastcount); 
$('#order').html(''); 
$('#order').html(" Serial number: "+lastcount); 
} 

//Save the task type and metrics 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(" The task type name cannot be null ", " prompt "); 
return ; 
} 
if(task_name.length>10){ 
jAlert(" The word count of task type is Max 10 A word ", " prompt "); 
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 <=count;i++){ 
evaluate_name[i] = $("input[name='index_name_"+i+"']").val(); 
if(evaluate_name[i].trim()==""||evaluate_name[i]==null){ 
jAlert(" The index name cannot be empty ", " prompt "); 
return ; 
} 
evaluate_limit[i] = $("input[name='index_limit_time_"+i+"']").val(); 
if(evaluate_limit[i].trim()==""||evaluate_limit[i]==null){ 
jAlert(" The target time limit cannot be empty ", " prompt "); 
return ; 
}else if(isNaN(evaluate_limit[i].trim())){ 
jAlert(" The target time limit must be all Numbers ", " prompt "); 
return ; 
} 
evaluate_alert[i] = $("input[name='index_alert_time_"+i+"']").val(); 
if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){ 
jAlert(" Indicator warning time cannot be empty ", " prompt "); 
return ; 
}else if(isNaN(evaluate_alert[i].trim())){ 
jAlert(" Indicator warning times must be all Numbers ", " prompt "); 
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(" Add a success "); 
sorts_list(); 
$.selfalerts._hide(); 
}else{ 
alert(" Did not succeed, please try again "); 
return false; 
} 
} 
}); 
} 

The CSS part:
 
 
.eBody{ 
overflow:hidden; 
background:lightgray; 
width:700px; 
margin-left:55px; 
border-radius:5px; 
margin-bottom:10px; 
} 

.eMain{ 
color:#001F69; 
float:left;font-family: ' Microsoft jas black '; 
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; 
} 

Related articles: