jquery對元素拖動排序樣本

來源:互聯網
上載者:User

 對元素進行拖動排序的實現方法有很多,在本文為大家介紹下使用jquery來完成這個工作,希望對大家有所協助

 代碼如下:<!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學習-jquery對元素拖動排序</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"); //是否更新到資料庫  //儲存原來的排列順序 var order = []; list.children("li").each(function () { order.push(this.title); //原排列順序儲存在title,得到後更改title $(this).attr("title", "你可以拖動進行排序"); }); orderlist.val(order.join()); //執行排列操作 list.sortable({ axis: 'y',//只能橫向拖動 opacity: 0.7,// 移動時的透明度 update: function () {//當排序動作結束時且元素座標已經發生改變時觸發此事件。 Submit(check.attr("checked")); } });  //ajax更新 var Update = function (itemid, itemorder) { $.ajax({ type: "post", url: "update.aspx", data: { id: itemid, order: orderlist.val() }, //id:新的排列對應的ID,order:原排列順序 beforeSend: function () { show.html("正在更新"); }, success: function (req) { if (req == "100") { show.html("更新成功"); } else if (req == "001") { show.html("失敗,請稍後再試"); } else { show.html("參數不全"); } } }); };  //調用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對元素拖動排序</h1> <div>拖動時同時更新資料庫資料:<input type="checkbox" id="check" /></div> <div> <input type="hidden" id="orderlist" /> <ul id="list">  <li id="14" title="1"> <img alt="img" src="baidu_logo.gif" /></li>  <li id="13" title="2"> <img alt="img" src="logo3w.png" /></li>  <li id="16" title="3"> <img alt="img" src="logo1.png" /></li>  </ul> </div> </form> </body> </html>  
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。