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

レンダリングから始めましょう:

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

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

html 部分:

コードをコピーします

=" js/jquery-ui.js" type="text/javascript">

注: インジケーターの順序は、ドラッグすることで変更できます (タスク開始時間インジケーターとタスク終了時間インジケーターを除く)。

シリアル番号: 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;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="プロセス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;
}