jQuery实现拖拽排序插件Sortable.js.zip资源-CSDN文库

共19个文件

jpg：9个

js：4个

html：3个

版权申诉

178 浏览量 2022-11-08 00:53:05 上传评论收藏 70KB ZIP 举报

《jQuery实现拖拽排序插件Sortable.js的深度解析》在Web开发中，用户交互的体验至关重要，而拖拽排序功能则能极大地提升用户在网页上的操作便捷性。jQuery作为一个广泛使用的JavaScript库，提供了丰富的API和插件来帮助开发者实现各种复杂的交互效果。本文将深入探讨jQuery实现的拖拽排序插件Sortable.js，解析其工作原理，以及如何在项目中应用。 Sortable.js是基于jQuery的一个轻量级、高性能的拖拽排序插件，它允许用户通过鼠标拖放元素来改变列表中的顺序，适用于各种列表或网格布局。该插件不仅支持HTML列表（如`<ul>`和`<ol>`），还能够处理自定义DOM结构，使得在各种应用场景下都能灵活使用。我们需要了解Sortable.js的核心功能。此插件的主要特性包括： 1. **易用性**：Sortable.js的API简洁明了，只需要几行代码就能快速实现拖拽排序功能。 2. **事件驱动**：通过监听拖放过程中的各个阶段，如开始、移动和结束等，开发者可以轻松地定制行为和反馈。 3. **兼容性**：支持现代浏览器及IE8以上版本，确保了广泛的应用场景。 4. **可定制性**：允许自定义排序指示器、拖动元素的外观，以及拖放后的回调函数，满足个性化需求。接下来，我们将详细解释如何在项目中集成和使用Sortable.js。确保在页面中引入jQuery库和Sortable.js插件的脚本文件。然后，选择需要实现拖拽排序的元素，调用`.sortable()`方法，并设置相关选项。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/sortable.min.js"></script> ``` ```javascript $(document).ready(function() { $("#myList").sortable({ group: 'listGroup', // 设置排序组，用于多列排序 handle: '.dragHandle', // 设置拖动的手柄元素 onEnd: function(event) { // 拖放结束后执行的回调 console.log('排序结束，新顺序为：' + event.newIndex); } }); }); ``` 在这个例子中，`#myList`是一个包含待排序元素的列表，`.dragHandle`是用于触发拖放操作的元素。`onEnd`回调函数可以在每次排序结束时更新服务器端的数据或者执行其他业务逻辑。 Sortable.js插件还支持一些高级特性，例如： - **动画效果**：可以通过`animation`选项设置拖放动画的时长，提升用户体验。 - **多列排序**：使用`group`选项可以实现多个列表之间的拖放排序。 - **连接列表**：`connectWith`选项允许将多个列表链接起来，元素可以在它们之间自由移动。 - **禁用/启用排序**：通过`disabled`选项可以临时禁用或启用拖拽排序功能。 jQuery的Sortable.js插件为Web开发提供了强大的拖拽排序功能，无论是简单的列表还是复杂的布局，都能轻松应对。通过理解其核心原理和API，开发者可以灵活地实现各种定制化需求，提升Web应用的交互性和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现拖拽排序插件Sortable.js.zip （19个子文件）

132677717011941449

Sortable-master

Sortable.js 32KB

Sortable.min.js 14KB

index.html 8KB

app.css 4KB

face-09.jpg 5KB

face-07.jpg 4KB

face-08.jpg 3KB

face-05.jpg 4KB

og-image.png 12KB

face-06.jpg 3KB

face-03.jpg 3KB

face-01.jpg 3KB

face-02.jpg 4KB

logo.png 5KB

face-04.jpg 4KB

app.js 5KB

iframe

index.html 1KB

frame.html 800B

jquery.binding.js 1KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta property="og:image" content="/st/og-image.png"/> <title>Sortable. No jQuery.</title> <meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, angular, ng-sortable, react, mixin, effects, rubaxa"/> <meta name="description" content="Sortable - is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap."/> <meta name="viewport" content="width=device-width, initial-scale=0.5"/> <link href="st/app.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <div style="padding: 80px 150px 0; height: 160px;"> <a class="logo" href="https://github.com/RubaXa/Sortable"><img src="st/logo.png"/></a> <h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browsers and touch devices. No jQuery.</h1> </div> </div>  <div class="container" style="height: 520px"> <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%"> <div class="layer title">List A</div> <ul id="foo" class="block__list block__list_words"> <li>бегемот</li> <li>корм</li> <li>антон</li> <li>сало</li> <li>железосталь</li> <li>валик</li> <li>кровать</li> <li>краб</li> </ul> </div> <div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;"> <div class="layer title">List B</div> <ul id="bar" class="block__list block__list_tags"> <li>казнить</li> <li>,</li> <li>нельзя</li> <li>помиловать</li> </ul> </div> </div>  <a name="m"></a> <div class="container"> <div id="multi" style="margin-left: 30px"> <div><div data-force="5" class="layer title title_xl">Multi</div></div> <div class="layer tile" data-force="30"> <div class="tile__name">Group A</div> <div class="tile__list"> <img src="st/face-01.jpg"/><img src="st/face-02.jpg"/><img src="st/face-03.jpg"/><img src="st/face-04.jpg"/> </div> </div> <div class="layer tile" data-force="25"> <div class="tile__name">Group B</div> <div class="tile__list"> <img src="st/face-05.jpg"/><img src="st/face-06.jpg"/><img src="st/face-07.jpg"/> </div> </div> <div class="layer tile" data-force="20"> <div class="tile__name">Group C</div> <div class="tile__list"> <img src="st/face-08.jpg"/><img src="st/face-09.jpg"/> </div> </div> </div> </div>  <a name="e"></a> <div class="container" style="margin-top: 100px"> <div id="filter" style="margin-left: 30px"> <div><div data-force="5" class="layer title title_xl">Editable list</div></div> <div style="margin-top: -8px; margin-left: 10px" class="block__list block__list_words"> <ul id="editable"> <li>Оля<i class="js-remove">✖</i></li> <li>Владимир<i class="js-remove">✖</i></li> <li>Алина<i class="js-remove">✖</i></li> </ul> <button id="addUser">Add</button> </div> </div> </div>  <a name="ag"></a> <div class="container" style="margin-top: 100px;"> <div id="advanced" style="margin-left: 30px;"> <div><div data-force="5" class="layer title title_xl">Advanced groups</div></div> <div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words"> <div class="block__list-title">pull & put</div> <ul id="advanced-1"> <li>Meat</li> <li>Potato</li> <li>Tea</li> </ul> </div> <div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words"> <div class="block__list-title">only pull (clone) no reordering</div> <ul id="advanced-2"> <li>Sex</li> <li>Drugs</li> <li>Rock'n'roll</li> </ul> </div> <div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words"> <div class="block__list-title">only put</div> <ul id="advanced-3"> <li>Money</li> <li>Force</li> <li>Agility</li> </ul> </div> <div style="clear: both"></div> </div> </div>  <a name="h"></a> <div class="container" style="margin-top: 100px;"> <div id="handle" style="margin-left: 30px;"> <div><div data-force="5" class="layer title title_xl">Drag handle and selectable text</div></div> <div style="width: 30%; margin-left: 10px" class="block__list_words"> <ul id="handle-1"> <li><span class="drag-handle">☰</span>Select text freely</li> <li><span class="drag-handle">☰</span>Drag my handle</li> <li><span class="drag-handle">☰</span>Best of both worlds</li> </ul> </div> <div style="clear: both"></div> </div> </div>  <a name="c"></a> <div class="container" style="margin-top: 100px"> <div style="margin-left: 30px"> <div><div class="layer title title_xl">Code example</div></div> <pre data-force="100" class="layer javascript" style="margin-top: -8px; margin-left: 10px; width: 90%"><code>// Simple list var list = document.getElementById("my-ui-list"); Sortable.create(list); // That's all. // Grouping var foo = document.getElementById("foo"); Sortable.create(foo, { group: "omega" }); var bar = document.getElementById("bar"); Sortable.create(bar, { group: "omega" }); // Or var container = document.getElementById("multi"); var sort = Sortable.create(container, { animation: 150, // ms, animation speed moving items when sorting, `0` — without animation handle: ".tile__title", // Restricts sort start click/touch to the specified element draggable: ".tile", // Specifies which items inside the element should be sortable onUpdate: function (evt/**Event*/){ var item = evt.item; // the current dragged HTMLElement } }); // .. sort.destroy(); // Editable list var editableList = Sortable.create(editable, { filter: '.js-remove', onFilter: function (evt) { var el = editableList.closest(evt.item); // get dragged item el && el.parentNode.removeChild(el); } }); </code></pre> </div> </div> <script src="Sortable.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.32/angular.min.js"></script> <script src="st/app.js"></script>  <style> /* Tomorrow Theme */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ /* Original theme - https://github.com/chriskempson/tomorrow-theme */ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ .tomorrow-comment, pre .comment, pre .title { color: #8e908c; } .tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { color: #c82829; } .tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { color: #f5871f; } .tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { color: #eab700; } .tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { color: #718c00; } .tomorrow-aqua, pre .css .hexcolor { color: #3e999f; }

评论收藏

内容反馈

版权申诉