マウスドラッグによる DIV ソートのサンプル code_jquery

レンダリングから始めましょう: 従来の並べ替えと比較して、これは非常に良い試みです。これが皆さんにインスピレーションを与えることを願っています。

私の最後のブログ投稿を参照してください: http://www.jb51.net/article/42087.htm

html 部分:

コードをコピーします =" js/jquery-ui.js" type="text/javascript"> /script> " style ="display:block;"> インジケーター: 注: インジケーターの順序は、ドラッグすることで変更できます (タスク開始時間インジケーターとタスク終了時間インジケーターを除く)。 シリアル番号: 1 ; label style="float:left">インジケーター名: 🎜 > 制限時間: 分 minutes

シリアル番号: 2 インジケーター名: = "eName Evaluate_name eject_input_text" name="index_name_2" type="text" value="タスク終了時刻"/> 制限時間: ;input class="eLimitestimate_limit eject_input_text" name="index_limit_time_2" type="text" /> 分 分 >

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( { 更新: function (event, ui) { evaluaterefresh(); } }); //インジケーターの並べ替え evaluaterefresh(); 🎜>//インジケーターを削除します function Evaluatemove(n){ $("#div_" n "").remove(); evaluaterefresh()

//インジケーターを削除した後に再番号付けします function Evaluaterefresh(){ var count=$('.evaluate_name').length-2; for(var i=0;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="プロセスdiv"] div:eq(' i ') input:eq(2)').attr("name","index_alert_time_" j); "] div:eq(' i ') input:eq(3)').attr("name","index_description_" j); $('div[name="processdiv"] div:eq(' i ')').attr("タイトル","インジケータ" j); $('div[name="processdiv"] div:eq(' i ') label:eq(0 )').html ("シリアル番号: " j);

// 最後のインジケーターのシリアル番号を固定名で設定します。 var lastcount; 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("タイトル","インジケーター" lastcount); $('# 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 ; } varestimate_name = new Array(); varevaluate_limit = new Array(); varevaluate_alert = new Array (); varestimate_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("インジケーター名は次のとおりですempty", " Tip"); return ; } evaluate_limit[i] = $("input[name='index_limit_time_" i "']").val(); if (evaluate_limit[i ].trim()==""||evaluate_limit[i]==null){ jAlert("インジケーターの時間制限を空にすることはできません", "プロンプト"); >}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(); } varindexname =estimate_name.join('-'); varindexlimit =evaluate_limit.join('-'); varindexalert =evaluate_alert.join ('-'); varindexdesc =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("追加に成功しました"); sorts_list(); }else{ alert("追加に失敗しましたもう一度試してください"); return false; } } }); }

CSS 部分:

コードをコピーします

コードは次のとおりです: /*每条指标*/ .eBody{ overflow:hidden; 背景:ライトグレー; 幅:700ピクセル; マージン左:55px; ボーダー半径:5px; マージン-ボトム:10px; }

.eMain{ color:#001F69; float:left;font-family: '微软雅黑'; フォントスタイル: 継承; フォントの太さ: 継承; 行の高さ: 2.2; マージン左: 10px; テキスト整列: 左; 幅: 550ピクセル; }

/*使用提案*/ .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; }