开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery拖动排序插件

jQuery 拖动排序插件是一种前端开发工具，它允许用户通过简单的拖放操作来对页面上的元素进行排序。这种功能在创建可排序的列表、图像库、表单构建器等场景中非常有用，可以极大地提升用户体验。以下是关于jQuery 拖动排序插件的相关信息：

基本概念

jQuery 拖动排序插件通过监听拖动事件（如 dragstart、dragend、dragover、dragenter、dragleave、drop 等）来实现拖放排序的基本原理。当用户开始拖动某个元素时，触发 dragstart 事件，设置 dataTransfer 对象以传递被拖动元素的信息。当用户释放鼠标时，触发 dragend 事件，根据拖动的最终位置更新元素的顺序。

优势

易于集成：只需引入jQuery和sortable.min.js文件即可使用。
丰富的配置选项：提供多种配置选项，如排序方式、动画效果等。
良好的兼容性：支持多种浏览器，包括IE6+、Firefox、Chrome、Safari等。
活跃的社区支持：有一个活跃的开发者社区，提供技术支持和解决问题。

类型

HTML5 Sortable：一个轻量级的jQuery插件，使用HTML5的本地拖放API，支持列表和网格样式布局。
jQuery UI Sortable：基于jQuery UI的拖放排序插件，提供了更多的定制选项和更丰富的交互效果。
DD Sortable：一个简单实用的jQuery拖拽排序插件，兼容IE8浏览器，支持动态添加内容。
Nestable：一个轻量级的jQuery插件，用于创建可拖动的嵌套列表，适合需要层级结构数据的场景。

应用场景

列表排序：如任务列表、待办事项列表等。
图片库排序：允许用户通过拖放来重新排序图像。
表单构建器：用户可以通过拖动表单元素来构建自定义表单。
网页布局：用户可以自定义页面元素的位置和顺序。

示例代码

以下是一个使用HTML5 Sortable插件实现列表拖拽排序的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sortable Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <style>
        .sortable {
            cursor: move;
        }
    </style>
</head>
<body>
    <ul class="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <script>
        new Sortable(document.querySelector('.sortable'), {
            animation: 150
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

动态添加内容后无法拖拽：确保在动态添加内容后重新初始化排序插件。
拖动后错位：检查CSS样式，确保拖动元素的定位正确。
浏览器兼容性问题：测试在不同浏览器上的表现，必要时使用polyfills或调整代码以适应不同浏览器。

通过上述信息，您可以根据具体需求选择合适的jQuery拖动排序插件，并解决使用过程中遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery 列表可拖动排序 sortable

1999/xhtml"> jQuery.../scripts/jquery.js"> jquery.ui.core.js"> jquery.ui.widget.js"> jquery.ui.mouse.js"> jquery.ui.sortable.js">... ("#myList").sortable({delay:1}); //直接让myList下的元素可以拖动排序

2.4K0 0

jquery 列表可拖动排序，并把排序发送给后台

列表可拖动排序，并把排序发送给后台 ? image.png jQuery.../scripts/jquery.js"> jquery.ui.core.js"> jquery.ui.widget.js"> jquery.ui.mouse.js"> jquery.ui.sortable.js">

1.4K0 0

jQuery仿淘宝登录拖动滑块验证插件优化版

今天写项目的时候需要一个拖动滑块验证功能，就在网上找了一个，但是有一点小 bug ，我优化了一下，分享给大家。...效果如下图： CSS： /* 拖动验证 www.w3h5.com */ #drag{ position: relative; background-color: #e8e8e8.../div>'+ '拖动滑块验证...width': _x}); }else if(_x > maxWidth){ //鼠标指针移动距离达到最大时清空事件 // 优化快速拖动显示... $(document).unbind('mousemove'); $(document).unbind('mouseup'); } }; })(jQuery

2703 0

jQuery仿淘宝登录拖动滑块验证插件优化版

今天写项目的时候需要一个拖动滑块验证功能，就在网上找了一个，但是有一点小 bug ，我优化了一下，分享给大家。效果如下图： ?...CSS： /* 拖动验证 www.w3h5.com */ #drag{ position: relative; background-color: #e8e8e8; .../div>'+ '拖动滑块验证... $(document).unbind('mousemove'); $(document).unbind('mouseup'); } }; })(jQuery...声明：本文由w3h5原创，转载请注明出处：《jQuery仿淘宝登录拖动滑块验证插件优化版》 https://www.w3h5.com/post/371.html (adsbygoogle

2K2 0

RecycleView的拖动排序

列表拖动排序功能也算是比较常见的了。在RecycleView还没有出现的那个年代，依稀记得是重写GridView实现拖拽，WindowManager实现拖拽的镜像。...因为RecycleView提供了拖动的回调ItemTouchHelper.Callback，通过实现该类，会让我们少写很多代码。先看一下，简化后的Demo效果图。 ?...这里的实现的效果是： ① 第一个标签不可编辑 ② 除了第一个标签外，其它标签可拖拽排序和删除 ItemTouchHelper.Callback的实现类 public class ItemDragCallback..., RecyclerView.ViewHolder target) { int fromPosition = viewHolder.getAdapterPosition(); //拖动的...mSortedList.remove(position); notifyDataSetChanged(); } /** * 对拖拽的元素进行排序

1.5K2 0

（四）原生 WEB 拖动排序

使用原生的拖动排序在我们网页开发中经常需要做拖动排序源码排序...e.target.classList.add('moving') }, 0) onElment = e.target // 给拖动的默认行为变为拖动...// 获取被覆盖的元素下表 const targetIndex = children.indexOf(e.target) // 判断他两个下标来判断是向上拖动还是向下拖动...if (sourceIndex < targetIndex) { console.log('向下拖动') // 向下拖动给他放到覆盖元素的下面

6691 0

uniapp拖动排序实现思路

change(e){ console.log('=== change start ==='); console.log("被拖动行...confirm(e){ console.log('=== confirm start ==='); console.log("被拖动行...} } } 注意要稍微处理一下，找到它drag.wxs源码中隐藏列表对应行的位置，给它加一个if 否则在一些情况下会报错hasClass找不到我们如果是开发对应功能，排序后还要将数组按照排好序的顺序进行修改...我们在confirm函数下写入如下代码： console.log('=== confirm start ==='); console.log('被拖动行：' + JSON.stringify(e.moveRow

3.4K1 0

vuedraggable实现列表拖动排序

文档地址安装 npm i -S vuedraggable 页面进行导入 import draggable from "vuedraggable"; 完整代码效...

3K2 0

WordPress 分类如何实现拖动排序？

所以我开发了「分类管理插件」可以让我们可以层级管理分类，并且实现拖动排序。...分类拖动排序有了层级管理分类，那么的排序功能也就好开发了，首先在菜单「WPJAM」> 「分类设置」开启拖动排序：由于 WordPress 的分类是层级的，直接在多层进行拖动排序是非常麻烦的，所以这里降低了一下维度...点击「下一级」进入该分类的子分类列表时进行拖动操作：在前端显示的时候，如果调用的参数没有显式设置分类排序的参数，默认就是按照后台拖动排序之后顺序进行输出。...WPJAM 分类管理插件 WPJAM「#分类管理插件#」是 WordPress 果酱出品的付费插件，目前主要有「层式管理分类」，「设置分类层级」，「分类拖动排序」，「分类数字ID固定链接」，「首页文章分类过滤...分类管理层式管理分类和分类拖动排序，支持设置分类的层级。并且在后台分类管理界面可以按层级显示和拖动排序。评论增强支持评论点赞，评论置顶和按照点赞数排序。图片集 1.

1.8K3 0

【JQuery】JQuery入门——JQuery 插件-validation

专栏介绍【JQuery】目前主要更新JQuery，一起学习一起进步。本期介绍本期主要介绍JQuery入门——知识点讲解(四) 文章目录 1. 插件简述 2. 插件导入 3. ...插件简述 JQuery 有着大量的功能插件，每种插件都有自己独有的功能。...例如：表单校验 ----validation 移动互联网开发 ----BootStrap Ajax 数据展示 -------EasyUI 今天我们学习其表单校验插件 ----...插件导入 validate 是 jQuery 插件，及必须在 jQuery 的基础上进行运行。...我们将导入 jQuery 库、 validate 库、和国际化资源库（可选，建议导入）准备代码： 3.

12.3K6 0

jQuery——插件

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互简单了解一下jQuery是什么，就让我们来了解一下他的插件中的自定义插件与表单验证吧...2.自定义插件（补充一下：$这个符号其实是jQuery的缩写） 2.1：$.extend [作用1]：对象继承：$.extend(对象1,对象2)---->对象1继承对象2 语法格式：$.extend...validate插件下载路径：https://jqueryvalidation.org 注意：validate插件下载路径不在jQuery官网下面呢，先详细介绍一下具体步骤使用步骤：【1.2】下载jQuery...插件验证库 jQuery.validate.js validate插件下载路径：https://jqueryvalidation.org 【1.2】将类库引入页面...下载完成后是一个压缩包文件，解压找到dist目录下的jquery.validate.js文件，就是我们要用的插件类案例：演示表单验证(用户名、密码、确认密码

14.9K1 0

jQuery 插件

1. jQuery 插件 jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。...这些插件也是依赖于jQuery来完成的，所以必须要先引入 jQuery文件，因此也称为 jQuery 插件。...jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤：...（jQuery 文件和插件文件）复制相关html、css、js (调用插件)。 1.1. 瀑布流插件（重点讲解）我们学习的第一个插件是jQuery之家的开源插件，瀑布流。...我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。下载位置 ? 代码演示插件的使用三点： 1.

6.9K3 0

jQuery 插件

jQuery 插件 jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。...这些插件也是依赖于jQuery来完成的，所以必须要先引入 jQuery文件，因此也称为 jQuery 插件。 ...jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery...（jQuery 文件和插件文件）复制相关html、css、js (调用插件)。 1.1. 瀑布流插件（重点讲解）我们学习的第一个插件是jQuery之家的开源插件，瀑布流。...我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。下载位置代码演示插件的使用三点： 1.

7.1K1 0

jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。...注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。...jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤：...（jQuery 文件和插件文件）复制相关html、css、js (调用插件)。 1. 瀑布流插件我们学习的第一个插件是jQuery之家的开源插件，瀑布流。...（下载略）我们使用jquery插件库EasyLazyload.

6.7K2 0

JQuery插件

--引用自己的插件库> jquery_plug_custom.js"> 2.脚本 ; (function ($) { $.extend(...+ min + ':' + s; console.log(time + ' My App: ' + message); } }); //拓展jquery...css("color", "red") .append("我居然被点击了") }); } //拓展jquery...css("color", setting.color); $(ele).append(setting.append); }); }; })(jQuery

4K7 0

基于js鼠标拖动图片排序

分享一款基于js的图片排序效果。鼠标拖动图片，重新排列图片的排列顺序。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。...obj.offsetTop; document.onmousemove = function (event) { //当鼠标拖动时计算...} } } via：http://www.w2bc.com/Article/23686 未经允许不得转载：肥猫博客 » 基于js鼠标拖动图片排序

7.8K3 0

jQuery实现可拖动控制进度条

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> jQuery...可拖动控制进度条 .demo { width: 350px;..." /> jquery/3.4.1/jquery.min.js"> <script...* * @author Nitin Hayaran * @version 0.1-RELEASE * * Dependencies * ------------ * jQuery (http...://jquery.com) * **/ ; (function($, window, document, undefined) { 'use strict'; var jRange

5K2 0

gojs插件——动态可拖动流程图插件

gojs插件——动态可拖动流程图插件 gojs是一个前端插件使用时需要去官网下载对应的js文件:https://gojs.net/latest/index.html 不同的样式参考此链接官网的介绍很详细

4.5K3 1

jQuery插件 -- Form表单插件jquery.form.js

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。...jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。...另外，插件还包括其他的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields(...下载地址： http://malsup.com/jquery/form/#download http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html...Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}] 15 //jqForm: jQuery对象，封装了表单的元素

13.5K5 0

【Android 事件分发】ItemTouchHelper 实现拖动排序

ItemTouchHelper 实现侧滑删除 ( 设置滑动方向 | 启用滑动操作 | 滑动距离判定 | 滑动速度判定 | 设置动画时间 | 设置侧滑触发操作 ) 【Android 事件分发】ItemTouchHelper 实现拖动排序...配置侧滑删除 1、设置移动标志 ( 拖动/滑动 ) 2、启用长按拖动功能 3、拖动距离判定设置 4、设置拖动排序触发操作 5、RecyclerView.Adapter 适配器中的交换排序操作三、完整代码实现.../ 高度上移动超过该比例 , 就认为拖动触发, 执行拖动相关操作 ; 设置的是比例值, 返回值为 0.9 , 就意味着滑动宽度/高度的 0.9 倍, 才触发拖动排序 onMove 方法 ; public..., 上下拖动的幅度必须要在 0.9 倍高度 , 拖动排序功能才能生效 ; 下面的操作中 , 拖动的幅度没有达到条目组件高度的 0.9 倍 , 拖动排序功能没有触发 ; 下面的操作中 , 拖动的幅度超过了...条目组件高度的 0.9 倍 , 拖动排序功能触发 ; 4、设置拖动排序触发操作重写 ItemTouchHelper.Callback 的 onMove 方法 , 用户拖动操作定成功后 , 会调用该方法

2.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭