jquery列表拖动排列(由项目提取相当好用)

下面我将详细讲解“jquery列表拖动排列(由项目提取相当好用)”的完整攻略。

1. 前言

该攻略是基于jQuery实现的列表拖动排序，可以方便地实现用鼠标拖拽方式调整顺序。

2. 实现步骤

2.1 引入jQuery库文件

首先需要引入jQuery库文件，建议使用CDN方式引入，以提高页面加载速度。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2.2 编写HTML结构

下一步需要编写列表的HTML结构，每一项都需要添加一个data-id属性，用来标识这个列表项的唯一性。

<ul id="sortable">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
  <li data-id="4">Item 4</li>
</ul>

2.3 调用jQuery UI库文件

因为该攻略是基于jQuery UI库实现的，所以需要在页面中引入jquery-ui.min.js库文件。

<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

2.4 编写JavaScript代码

接下来需要编写JavaScript代码，实现列表的拖拽排序功能。具体实现步骤如下：

在JavaScript文件中编写以下代码：

$( function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
} );

运行页面，并用鼠标拖拽列表项进行排序。

下面是一个带有四个列表项的示例：

<!doctype html>
<html>
<head>
  <title>jQuery Sortable Demo</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <ul id="sortable">
    <li data-id="1">Item 1</li>
    <li data-id="2">Item 2</li>
    <li data-id="3">Item 3</li>
    <li data-id="4">Item 4</li>
  </ul>
  <script>
    $( function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
    } );
  </script>
</body>
</html>

2.5 自定义样式

如果需要自定义样式，可以添加sortable和ui-state-default类到列表项上。

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
#sortable li span { position: absolute; margin-left: -1.3em; }

3. 示例说明

下面提供两个示例：

3.1 示例1：改变列表项背景色

<!doctype html>
<html>
<head>
  <title>jQuery Sortable Demo 1</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    .ui-state-default { background-color: #f0f0f0; }
  </style>
</head>
<body>
  <ul id="sortable">
    <li data-id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li data-id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li data-id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li data-id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  </ul>
  <script>
    $( function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
    } );
  </script>
</body>
</html>

示例1实现的功能是改变拖拽排序后的列表项背景色。

3.2 示例2：改变列表项字体颜色

<!doctype html>
<html>
<head>
  <title>jQuery Sortable Demo 2</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    .ui-state-default { color: #f0f0f0; }
  </style>
</head>
<body>
  <ul id="sortable">
    <li data-id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li data-id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li data-id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li data-id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  </ul>
  <script>
    $( function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
    } );
  </script>
</body>
</html>

示例2实现的功能是改变拖拽排序后的列表项字体颜色。

4. 总结

通过以上代码，就可以方便地在项目中使用jQuery实现拖拽排序功能。不过该攻略依赖于jQuery UI库文件，所以在使用前需要确认页面中已经引入了该库文件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery列表拖动排列(由项目提取相当好用) - Python技术站