jQueryUI 实现拖拽排序实例自动保存

最新推荐文章于 2023-11-27 10:38:02 发布

JackNavy

最新推荐文章于 2023-11-27 10:38:02 发布

阅读量480

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_41035192/article/details/107770325

版权

其实内容很简单主要是推荐一款jq的插件：jqueryUI

拖动排序：

直接粘贴使用，

使用非常简单：去jqueryUI官网进行下载 :http://jqueryui.com/download/
然后引入js和css文件

自动保存功能也有：：：：：：：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="stylesheet" href="jquery-ui.min.css">
     <script src="external/jquery/jquery.js"></script>
     <script src="jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.css" rel="external nofollow">
    <script src="jquery-ui.js"></script>

</head>
<body>
    <style>
        ul.sortable{
            width: 400px;
            margin:0 auto;
        }
        ul.sortable li {
        list-style: none;
        margin-bottom: 15px;
        border:1px solid #333;
        cursor: pointer;
        }
        .move {
            height: 40px;
            background: #fff;
            line-height: 40px;
            padding: 0 15px;
            font-size: 14px;
        }
    </style>

<div class="container">

   <ul class="sortable">
   <h3>拖拽栏目进行排序 ↑↓</h3>
     <li id="draggable2" class="drag">
      <div class="innerdiv">
        <div class="innerdiv2">
         <div class="move">◉ 协会动态</div>
        </div>
      </div>
     </li>
     <li id="draggable3" class="drag">
       <div class="innerdiv">
        <div class="innerdiv2">
        <div class="move">◉ 图片新闻</div> 
        </div>
     </div>
     </li> 
     <li id="draggable4" class="drag">
       <div class="innerdiv">
         <div class="innerdiv2">
         <div class="move">◉ 新闻资讯</div> 
        </div>
       </div>
     </li> 
     <li id="draggable5" class="drag">
       <div class="innerdiv">
         <div class="innerdiv2">
         <div class="move">◉ 行业资讯</div> 
         </div>
       </div>
     </li> 
     <li id="draggable6" class="drag">
       <div class="innerdiv">
         <div class="innerdiv2">
         <div class="move">◉ 行业服务</div> 
        </div>
     </div>
     <li id="draggable1" class="drag">
       <div class="innerdiv">
        <div class="innerdiv2">
         <div class="move">◉ 战略伙伴</div> 
        </div>
       </div>
     </li>
     </li> 
   </ul>
  </div>
</body>
</html>
<script>

 $(function() {
  var arr = '';
  var sort = $( ".sortable" ).sortable({
    handle: ".move",
    cursor:'move',
    revert: true,
    stop:function(){
 //记录sort后的id顺序数组
    var arr = $( ".sortable" ).sortable('toArray');
      console.log(arr);
//拖拽后利用localStorage记录顺序
      localStorage.arr = arr;
    }
  });
  var localSt = localStorage.arr;
  //如果有localst记录则，按照这个进行排序元素
  if(localSt){
    var resArr = localSt.split(',');
    var resUl = $('ul');
    //li 数组
    for(var i = 0;i < resArr.length;i++){
      resUl.append($("#" + resArr[i]));
    }
  }
 });
 
 </script>

没有自动保存：：：：：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 排序（Sortable） - 默认功能</title>
  <link rel="stylesheet" href="jquery-ui.min.css">
  <script src="external/jquery/jquery.js"></script>
  <script src="jquery-ui.min.js"></script>
  <!-- <link rel="stylesheet" href="jqueryui/style.css"> -->

  <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>

  <script>
    $(function() {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
  </script>

</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 
 
</body>
</html>

JackNavy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQueryUI 实现拖拽排序实例自动保存

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="jquery-ui
复制链接

扫一扫