jQueryUI Sortable 應用Demo(分享)

來源：懂視網責編：小采時間：2020-11-27 22:30:53

jQueryUI Sortable 應用Demo(分享)

jQueryUI Sortable 應用Demo(分享):最近工作用需要設計一個自由布局的頁面設計。我選了jQuery UI 的 sortable ，可以拖拽，自由排序使用很方便，寫一個demo，做個記錄。第一、單項目自由排序下圖效果代碼段： <script type=text/javascript> $(functio

推薦度：

點擊下載本文 文檔為doc格式

導讀jQueryUI Sortable 應用Demo(分享):最近工作用需要設計一個自由布局的頁面設計。我選了jQuery UI 的 sortable ，可以拖拽，自由排序使用很方便，寫一個demo，做個記錄。第一、單項目自由排序下圖效果代碼段： <script type=text/javascript> $(functio

最近工作用需要設計一個自由布局的頁面設計。我選了jQuery UI 的 sortable ，可以拖拽，自由排序使用很方便，寫一個demo，做個記錄。

第一、單項目自由排序

下圖效果

代碼段：

<script type="text/javascript"> 
 
 $(function () {
 $("#box_wrap").sortable({
 helper: "clone",
 placeholder: "box-holdplace",
 sort: function (e, ui) {
 //排序時觸發事件
 },
 // handle: ".handle",//指定元素內的某種元素才可以拖動，非常有用
 }).disableSelection(); 
 });
</script>

html:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
 <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 
 <script src="js/jquery-1.10.2.min.js"></script>
 <script src="js/bootstrap/js/bootstrap.min.js"></script>
 
 <!--Sortable -->
 <script src="https://www.gxlcms.com//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
 <div class="box_wrap" id="box_wrap">
 <div class="box">
 test1
 </div>
 <div class="box">
 test2
 </div>
 <div class="box">test3
 </div>
 </div>
</body>
</html>

第二、多排序組之間自由拖拽

代碼段：

<script type="text/javascript">
 
 $(function () {
 $("#box_wrap1,#box_wrap2").sortable({
 connectWith: ".box_wrap",
 helper: "clone",
 cursor: "move",//移動時候鼠標樣式 
 opacity: 0.5, //拖拽過程中透明度
 placeholder: "box-holdplace",//占位符className，設置一個樣式 
 }).disableSelection();
 });
</script>

html 代碼：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
 <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />

 <script src="js/jquery-1.10.2.min.js"></script>
 <script src="js/bootstrap/js/bootstrap.min.js"></script>

 <!--Sortable -->
 <script src="https://www.gxlcms.com//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>
<body>
 <div class="container">
 <div class="row">
 <div class="column col-md-6">
 <div class="box_wrap" id="box_wrap1">
 <div class="box">
 left-test1
 </div>
 <div class="box">
 left-test2
 </div>
 <div class="box">
 left-test3
 </div>
 </div>
 </div>
 <div class="column col-md-6">
 <div class="box_wrap" id="box_wrap2" >
 <div class="box">
 test1
 </div>
 <div class="box">
 test2
 </div>
 <div class="box">
 test3
 </div>
 </div>
 </div>
 </div> 
 </div>
</body>
</html>

上面另種是工作中比較常用的排序形式。

以上這篇jQueryUI Sortable 應用Demo(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQueryUI Sortable 應用Demo(分享)

推薦度：

點擊下載本文 文檔為doc格式

標簽： demo sortable jqueryui

熱門焦點

jQueryUI Sortable 應用Demo(分享)

jQueryUI Sortable 應用Demo(分享)

jQueryUI Sortable 應用Demo(分享)

最新推薦

猜你喜歡

熱門推薦