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;i var 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; }