欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery對元素拖動(dòng)排序示例

 更新時(shí)間：2014年01月16日 15:52:17   作者：jquery001  
對元素進(jìn)行拖動(dòng)排序的實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用jquery來完成這個(gè)工作，希望對大家有所幫助

完整代碼：（aspx文件末尾有下載）

復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery學(xué)習(xí)-jquery對元素拖動(dòng)排序</title>
<style type="text/css">
#show
{
color: Red;
}
#list
{
cursor: move;
width: 300px;
}
#list li
{
border: solid 1px yellow;
float: left;
list-style-type: none;
margin-top: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {

//保存常用選擇器
var list = $("#list"); //ul
var show = $("#show"); //輸出提示
var orderlist = $("#orderlist"); //原順序
var check = $("#check"); //是否更新到數(shù)據(jù)庫

//保存原來的排列順序
var order = [];
list.children("li").each(function () {
order.push(this.title); //原排列順序保存在title，得到后更改title
$(this).attr("title", "你可以拖動(dòng)進(jìn)行排序");
});
orderlist.val(order.join());
//執(zhí)行排列操作
list.sortable({
axis: 'y',//只能橫向拖動(dòng)
opacity: 0.7,// 移動(dòng)時(shí)的透明度
update: function () {//當(dāng)排序動(dòng)作結(jié)束時(shí)且元素坐標(biāo)已經(jīng)發(fā)生改變時(shí)觸發(fā)此事件。
Submit(check.attr("checked"));
}
});

//ajax更新
var Update = function (itemid, itemorder) {
$.ajax({
type: "post",
url: "update.aspx",
data: { id: itemid, order: orderlist.val() }, //id:新的排列對應(yīng)的ID,order：原排列順序
beforeSend: function () {
show.html("正在更新");
},
success: function (req) {
if (req == "100") {
show.html("更新成功");
}
else if (req == "001") {
show.html("失敗，請稍后再試");
}
else {
show.html("參數(shù)不全");
}
}
});
};

//調(diào)用ajax更新方法
var Submit = function (update) {
var order = [];
list.children("li").each(function () {
order.push(this.id);
});
var itemid = order.join(',');
//如果單選框選中，則更新表中排列順序
if (update) {
Update(itemid);
}
else {
show.html("");
}
};



});
</script>
</head>

<body>
<form method="post" action="jquery-drag-order-sort.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" />
</div>

<span id="show"></span>
<h1>jQuery對元素拖動(dòng)排序</h1>
<div>拖動(dòng)時(shí)同時(shí)更新數(shù)據(jù)庫數(shù)據(jù)：<input type="checkbox" id="check" /></div>
<div>
<input type="hidden" id="orderlist" />
<ul id="list">

<li id="14" title="1">
<img alt="img" src="http://www.baidu.com/img/baidu_logo.gif" /></li>

<li id="13" title="2">
<img alt="img" src="http://www.google.com.hk/images/srpr/logo3w.png" /></li>

<li id="16" title="3">
<img alt="img" src="http://img3.cn.msn.com/images/0809/logo1.png" /></li>
</ul>
</div>
</form>
</body>
</html>

下邊，我們一步一步來實(shí)現(xiàn)這個(gè)功能。

<span id="show">
<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <img alt="img" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>


有一個(gè)單選框，當(dāng)用戶選中后，拖動(dòng)圖片時(shí)對數(shù)據(jù)庫中數(shù)據(jù)排序進(jìn)行更改。隱藏域保存原來的圖片排列順序。ul顯示圖片列表。

為了能看得過去，稍微加了點(diǎn)樣式：

var show = jQuery("#show"); //輸出提示 
var orderlist = jQuery("#orderlist"); //原順序 
var check = jQuery("#check"); //是否更新到數(shù)據(jù)庫

首先將常用的選擇器保存下來，這樣后邊調(diào)用就變得比較簡潔。這一部大家肯定沒有問題。^_^

//保存原來的排列順序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列順序保存在title，得到后更改title 
  jQuery(this).attr("title", "你可以拖動(dòng)進(jìn)行排序"); 
}); 
orderlist.val(order.join(','));

保存原來的排列順序到隱藏域。這里用到了數(shù)組的push()方法，就是將ul每個(gè)li中的title(原來的排列順序)添加到數(shù)組中。最后用join()方法，得到了原排列順序，返回一個(gè)字符串?，F(xiàn)在排列順序格式為1,2,3 。

//ajax更新 
var Update = function(itemid, itemorder) { 
  jQuery.ajax({ 
    type: "post", 
    url: "update.aspx", 
    //id:新的排列對應(yīng)的ID,order：原排列順序
    data: { id: itemid, order: orderlist.val() },  
    beforeSend: function() { 
      show.html("正在更新"); 
    }, 
    success: function() { 
      show.html("更新成功"); 
    } 
  }); 
};

接下來，將ajax更新塊單獨(dú)分出來。這樣程序變得比較整潔，這塊沒有新東西。

//調(diào)用ajax更新方法 
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(','); 
  //如果單選框選中，則更新表中排列順序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

和得到排列順序類似，將ID組成一個(gè)字符串傳遞給了Update()方法。函數(shù)中的參數(shù)update為checkbox是否選中。

//執(zhí)行排列操作 
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});

最后，執(zhí)行排列操作。后臺(tái)部分就是對現(xiàn)在ID對應(yīng)原來排列順序的更新，相信大家并不陌生。

可以看出如果不進(jìn)行數(shù)據(jù)庫操作，該插件只需要調(diào)用sorttable便可完成對元素的拖動(dòng)。

下載演示

相關(guān)文章

最新評論