DIV 정렬 샘플 code_jquery를 구현하기 위해 마우스 드래그

렌더링부터 시작해 보겠습니다.

기존 정렬과 비교할 때 이는 매우 좋은 시도이므로 모든 사람에게 영감을 줄 수 있기를 바랍니다.

제 마지막 블로그 게시물을 참고하세요: http://www.jb51.net/article/42087.htm

html 부분:

코드 복사 코드는 다음과 같습니다.

eInfo" > 참고: 드래그하여 표시기 순서를 변경할 수 있습니다(작업 시작 시간 및 작업 종료 시간 표시기 제외).

일련번호: 1 ; label style="float:left">표시자 이름: 🎜 > 시간 제한: 분
알림 시간: 분

일련번호: 2

표시기 이름:
;input class="eLimit estimate_limitject_input_text" name="index_limit_time_2" type="text" />분
분 >

;/body>



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(); 🎜>//표시기 제거
function estimatemove(n){
$("#div_" n "").remove()
evaluaterefresh()}

//지표 제거 후 번호 다시 매기기
function estimaterefresh(){
var count=$('.evaluate_name').length-2
for(var i=0;ivar j = i 2;
$('div[name="processdiv"] div:eq(' i ') 입력:eq(0)').attr("name" ,"index_name_" j );
$('div[name="processdiv"] div:eq(' i ') 입력:eq(1)').attr("name","index_limit_time_" j)
$( 'div[name="processdiv"] div:eq(' i ') 입력:eq(2)').attr("name","index_alert_time_" j)
$('div [name="processdiv" "] div:eq(' i ') 입력: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 ("일련번호: " j);

//고정된 이름으로 마지막 표시기의 일련번호를 설정합니다.
var lastcount
if(count==0 | | 개수=='0'){
lastcount = 2;
}else {
lastcount = 개수 2
}

$('#lastevaluate 입력: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(''); ').html("일련번호:" lastcount)
}

//작업 유형 및 지표 데이터를 데이터베이스에 저장
function estimatesave(){
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 estimate_name = new Array();
var estimate_limit = new Array();
var estimate_alert = new Array ();
var estimate_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("표시기 시간 제한은 모두 숫자여야 합니다.", "Tip")
return
}
estimate_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 = estimate_name.join('-');
var indexlimit = estimate_limit.join('-');
var indexalert = estimate_alert.join ('-');
var indexdesc = estimate_desc.join('-');
$.ajax({
url:"/SortsManagement/exectute_evaluate_save",
type:"POST",
데이터:{
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("추가됨");
sorts_list();
$.selfalerts._hide();
}else{
alert("추가되지 않았습니다. 다시 시도");
false 반환;
}
}
});
}


css 부분:

코드 복사

코드는 다음과 같습니다.

/*每条指标*/
.eBody{
overflow:hidden;
배경:밝은 회색;
너비:700px;
왼쪽 여백:55px;
테두리 반경:5px;
여백-하단:10px;
}

.eMain{
color:#001F69;
float:left;font-family: '微软雅黑';
글꼴 스타일: 상속;
글꼴 가중치: 상속;
줄 높이: 2.2;
왼쪽 여백: 10px;
텍스트 정렬: 왼쪽;
너비: 550px;
}

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

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

.eLimit, .eAlert{
float:left;width:50px; 텍스트 정렬:가운데;
}

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