鼠標(biāo)拖動實現(xiàn)DIV排序示例代碼
更新時間：2013年10月14日 16:58:13 作者：
鼠標(biāo)拖動實現(xiàn)DIV排序的教程有很多，在本文將為大家詳細介紹個不錯的示例，對比傳統(tǒng)的排序，這是一個很不錯的嘗試
先上效果圖：
對比傳統(tǒng)的排序，這是一個很不錯的嘗試，希望對大家有啟發(fā)。
大家可以參考我的上一篇博文：http://www.dbjr.com.cn/article/42087.htm
html部分：
<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">指標(biāo)：</div>
<div class="eMain" >
<input style="float:left;" type="button" name="insert" class="selfpopup_button" onclick="addevaluate()" value="添加"> <span class="eInfo"> 注：可以通過拖動來改變指標(biāo)順序（不含任務(wù)開始時間和任務(wù)結(jié)束時間指標(biāo)）。</span>
<div title="指標(biāo)1" class="eBody">
<label class="eNumber">序號：1 </label>
<label style="float:left">指標(biāo)名稱：</label><input class="eName evaluate_name eject_input_text" name="index_name_1" type="text" value="任務(wù)開始時間"/>
<label style="float:left"> 時限：</label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_1" type="text" /><span class="eMinute">分鐘</span>
<label style="float:left"> 預(yù)警時間：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_1" type="text" /><span class="eMinute">分鐘</span>
</div>
<div action-type="processdiv" id="processdiv" name="processdiv" style="width:800px;">
</div>
<div title="指標(biāo)2" id="lastevaluate" class="eBody">
<div class="eNumber" id="order">序號：2</div>
<label style="float:left" > 指標(biāo)名稱：</label><input class="eName evaluate_name eject_input_text" name="index_name_2" type="text" value="任務(wù)結(jié)束時間"/>
<label style="float:left"> 時限：</label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_2" type="text" /><span class="eMinute">分鐘</span>
<label style="float:left"> 預(yù)警時間：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_2" type="text" /><span class="eMinute">分鐘</span>
</div>
</div>
</div>
</li>
</ul>
</form>
</body>
</html>
JS部分：
//添加指標(biāo)
function addevaluate(){
var n = $(".evaluate_name").size();
var html = '';
html = "<div title='"+n+"' class='eBody' id='div_"+n+"'><label class='eNumber'>序號："+n+"</label><label style='float:left;'> 指標(biāo)名稱：</label><input class='eName evaluate_name eject_input_text' name='index_name_"+n+"' type='text'/>";
html += "<label style='float:left;'> 時限：</label> <input class='eLimit evaluate_limit eject_input_text' name='index_limit_time_"+n+"' type='text'/><span class='eMinute'>分鐘</span>";
html += "<label style='float:left;'> 預(yù)警時間：</label><input class='eAlert evaluate_alert eject_input_text' name='index_alert_time_"+n+"' type='text'/><span class='eMinute'>分鐘</span>";
html += "<input type='button' name='evaluatemove' value='移除' onclick='evaluatemove("+n+")'/></div>";
$("div[name=processdiv]").append(html);
//使div可以拖拽
$("div[name=processdiv]").sortable({
update: function (event, ui) {
evaluaterefresh();
}
});
//指標(biāo)重新排序
evaluaterefresh();
}
//移除指標(biāo)
function evaluatemove(n){
$("#div_"+n+"").remove();
evaluaterefresh();
}
//移除指標(biāo)后重新編號
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","指標(biāo)"+j);
$('div[name="processdiv"] div:eq('+i+') label:eq(0)').html("序號："+j);
}
//給最后一條固定名稱的指標(biāo)設(shè)置序號
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","指標(biāo)"+lastcount);
$('#order').html('');
$('#order').html("序號："+lastcount);
}
//保存任務(wù)類型和指標(biāo)數(shù)據(jù)到數(shù)據(jù)庫
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("任務(wù)類型名稱不能為空", "提示");
return ;
}
if(task_name.length>10){
jAlert("任務(wù)類型字?jǐn)?shù)最多為10個字", "提示");
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("指標(biāo)名稱不能為空", "提示");
return ;
}
evaluate_limit[i] = $("input[name='index_limit_time_"+i+"']").val();
if(evaluate_limit[i].trim()==""||evaluate_limit[i]==null){
jAlert("指標(biāo)時限不能為空", "提示");
return ;
}else if(isNaN(evaluate_limit[i].trim())){
jAlert("指標(biāo)時限必須全是數(shù)字", "提示");
return ;
}
evaluate_alert[i] = $("input[name='index_alert_time_"+i+"']").val();
if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){
jAlert("指標(biāo)預(yù)警時間不能為空", "提示");
return ;
}else if(isNaN(evaluate_alert[i].trim())){
jAlert("指標(biāo)預(yù)警時間必須全是數(shù)字", "提示");
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("添加成功");
sorts_list();
$.selfalerts._hide();
}else{
alert("添加不成功，請重新嘗試");
return false;
}
}
});
}
css部分：
/*每條指標(biāo)*/
.eBody{
overflow:hidden;
background:lightgray;
width:700px;
margin-left:55px;
border-radius:5px;
margin-bottom:10px;
}
.eMain{
color:#001F69;
float:left;font-family: '微軟雅黑';
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;
}
對比傳統(tǒng)的排序，這是一個很不錯的嘗試，希望對大家有啟發(fā)。
大家可以參考我的上一篇博文：http://www.dbjr.com.cn/article/42087.htm
html部分：
復(fù)制代碼 代碼如下:
<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">指標(biāo)：</div>
<div class="eMain" >
<input style="float:left;" type="button" name="insert" class="selfpopup_button" onclick="addevaluate()" value="添加"> <span class="eInfo"> 注：可以通過拖動來改變指標(biāo)順序（不含任務(wù)開始時間和任務(wù)結(jié)束時間指標(biāo)）。</span>
<div title="指標(biāo)1" class="eBody">
<label class="eNumber">序號：1 </label>
<label style="float:left">指標(biāo)名稱：</label><input class="eName evaluate_name eject_input_text" name="index_name_1" type="text" value="任務(wù)開始時間"/>
<label style="float:left"> 時限：</label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_1" type="text" /><span class="eMinute">分鐘</span>
<label style="float:left"> 預(yù)警時間：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_1" type="text" /><span class="eMinute">分鐘</span>
</div>
<div action-type="processdiv" id="processdiv" name="processdiv" style="width:800px;">
</div>
<div title="指標(biāo)2" id="lastevaluate" class="eBody">
<div class="eNumber" id="order">序號：2</div>
<label style="float:left" > 指標(biāo)名稱：</label><input class="eName evaluate_name eject_input_text" name="index_name_2" type="text" value="任務(wù)結(jié)束時間"/>
<label style="float:left"> 時限：</label> <input class="eLimit evaluate_limit eject_input_text" name="index_limit_time_2" type="text" /><span class="eMinute">分鐘</span>
<label style="float:left"> 預(yù)警時間：</label><input class="eAlert evaluate_alert eject_input_text" name="index_alert_time_2" type="text" /><span class="eMinute">分鐘</span>
</div>
</div>
</div>
</li>
</ul>
</form>
</body>
</html>
JS部分：
復(fù)制代碼 代碼如下:
//添加指標(biāo)
function addevaluate(){
var n = $(".evaluate_name").size();
var html = '';
html = "<div title='"+n+"' class='eBody' id='div_"+n+"'><label class='eNumber'>序號："+n+"</label><label style='float:left;'> 指標(biāo)名稱：</label><input class='eName evaluate_name eject_input_text' name='index_name_"+n+"' type='text'/>";
html += "<label style='float:left;'> 時限：</label> <input class='eLimit evaluate_limit eject_input_text' name='index_limit_time_"+n+"' type='text'/><span class='eMinute'>分鐘</span>";
html += "<label style='float:left;'> 預(yù)警時間：</label><input class='eAlert evaluate_alert eject_input_text' name='index_alert_time_"+n+"' type='text'/><span class='eMinute'>分鐘</span>";
html += "<input type='button' name='evaluatemove' value='移除' onclick='evaluatemove("+n+")'/></div>";
$("div[name=processdiv]").append(html);
//使div可以拖拽
$("div[name=processdiv]").sortable({
update: function (event, ui) {
evaluaterefresh();
}
});
//指標(biāo)重新排序
evaluaterefresh();
}
//移除指標(biāo)
function evaluatemove(n){
$("#div_"+n+"").remove();
evaluaterefresh();
}
//移除指標(biāo)后重新編號
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","指標(biāo)"+j);
$('div[name="processdiv"] div:eq('+i+') label:eq(0)').html("序號："+j);
}
//給最后一條固定名稱的指標(biāo)設(shè)置序號
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","指標(biāo)"+lastcount);
$('#order').html('');
$('#order').html("序號："+lastcount);
}
//保存任務(wù)類型和指標(biāo)數(shù)據(jù)到數(shù)據(jù)庫
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("任務(wù)類型名稱不能為空", "提示");
return ;
}
if(task_name.length>10){
jAlert("任務(wù)類型字?jǐn)?shù)最多為10個字", "提示");
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("指標(biāo)名稱不能為空", "提示");
return ;
}
evaluate_limit[i] = $("input[name='index_limit_time_"+i+"']").val();
if(evaluate_limit[i].trim()==""||evaluate_limit[i]==null){
jAlert("指標(biāo)時限不能為空", "提示");
return ;
}else if(isNaN(evaluate_limit[i].trim())){
jAlert("指標(biāo)時限必須全是數(shù)字", "提示");
return ;
}
evaluate_alert[i] = $("input[name='index_alert_time_"+i+"']").val();
if(evaluate_alert[i].trim()==""||evaluate_alert[i]==null){
jAlert("指標(biāo)預(yù)警時間不能為空", "提示");
return ;
}else if(isNaN(evaluate_alert[i].trim())){
jAlert("指標(biāo)預(yù)警時間必須全是數(shù)字", "提示");
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("添加成功");
sorts_list();
$.selfalerts._hide();
}else{
alert("添加不成功，請重新嘗試");
return false;
}
}
});
}
css部分：
復(fù)制代碼 代碼如下:
/*每條指標(biāo)*/
.eBody{
overflow:hidden;
background:lightgray;
width:700px;
margin-left:55px;
border-radius:5px;
margin-bottom:10px;
}
.eMain{
color:#001F69;
float:left;font-family: '微軟雅黑';
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;
}
相關(guān)文章
深入淺析ng-bootstrap 組件集中 tabset 組件的實現(xiàn)分析
這篇文章主要介紹了ng-bootstrap 組件集中 tabset 組件的實現(xiàn)分析 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
jQuery+jsp下拉框聯(lián)動獲取本地數(shù)據(jù)的方法(附源碼)
這篇文章主要介紹了jQuery+jsp下拉框聯(lián)動獲取本地數(shù)據(jù)的方法,以實例形式較為詳細的分析了jQuery結(jié)合jsp實現(xiàn)下拉聯(lián)動菜單讀取本地數(shù)據(jù)的相關(guān)技巧,并附帶了完整源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
本文依賴于jQuery,其中第一種，第二種方式是使用jQuery實現(xiàn)的，第三種方式是基于JS和DOM實現(xiàn)的，感興趣的朋友可以了解下2013-12-12
jQuery UI是一套非常好用的jQuery Tools庫，目前已經(jīng)發(fā)布的最新版本是1.8.4。在我自己的使用過程中，總有一些不爽。因為我下載的那個包里默認(rèn)的主題樣式是下圖這樣的，使用起來很難和具體的網(wǎng)頁風(fēng)格去配合。2010-09-09
JQuery跨Iframe選擇實現(xiàn),下面也通過用DOM方法與jquery方法結(jié)合的方式實現(xiàn)了，需要的朋友可以參考下。2010-08-08
這篇文章主要介紹了jQuery實現(xiàn)簡潔的導(dǎo)航菜單效果，簡潔大方的導(dǎo)航菜單，需要的朋友可以參考下2015-11-11
對直接的DOM操作進行限制2009-05-05
jQuery插件expander實現(xiàn)圖片翻轉(zhuǎn)特效
本文給大家分享的是一款基于jQuery插件expander實現(xiàn)圖片翻轉(zhuǎn)特效，一共有6種不同的圖片翻轉(zhuǎn)樣式，十分的炫酷，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了jQuery表單元素過濾選擇器用法,結(jié)合實例形式分析了jQuery表單元素過濾選擇器針對表單元素匹配相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
取消選中單選框radio，第一種，第二種方式是使用jQuery實現(xiàn)的，第三種方式是基于JS和DOM實現(xiàn)的，大家可以看看下面的示例2014-09-09