首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jquery-ui可排序-隐藏原始列表,而拖动隐藏被拖动的项

Jquery-ui是一个基于jQuery的UI库,提供了丰富的交互组件和效果,其中包括可排序功能。可排序功能允许用户通过拖动来重新排序列表中的项。

在使用Jquery-ui的可排序功能时,可以通过设置参数来实现隐藏原始列表并拖动隐藏被拖动的项的效果。具体步骤如下:

  1. 引入Jquery和Jquery-ui的库文件:
代码语言:txt
复制
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
  1. 创建一个HTML列表,并给每个列表项添加一个唯一的标识符:
代码语言:txt
复制
<ul id="sortable">
  <li class="sortable-item" data-id="1">Item 1</li>
  <li class="sortable-item" data-id="2">Item 2</li>
  <li class="sortable-item" data-id="3">Item 3</li>
  <li class="sortable-item" data-id="4">Item 4</li>
</ul>
  1. 使用jQuery选择器选中可排序的列表,并调用sortable()方法来初始化可排序功能:
代码语言:txt
复制
$(function() {
  $("#sortable").sortable({
    axis: "y", // 设置只能在垂直方向上拖动
    containment: "parent", // 设置拖动范围为父元素
    update: function(event, ui) {
      // 拖动完成后的回调函数
      // 可以在这里进行相应的操作,比如保存排序结果等
    }
  });
});

通过上述代码,我们实现了可排序的功能。当用户拖动列表项时,其他列表项会自动调整位置。而隐藏原始列表和拖动隐藏被拖动的项的效果可以通过CSS样式来实现,例如:

代码语言:txt
复制
.sortable-item {
  display: none; /* 隐藏原始列表项 */
}

.ui-sortable-helper {
  display: none; /* 隐藏被拖动的项 */
}

这样,当用户拖动列表项时,原始列表项会被隐藏,被拖动的项也会被隐藏,从而实现了隐藏原始列表和拖动隐藏被拖动的项的效果。

Jquery-ui的可排序功能可以广泛应用于需要用户自定义排序的场景,比如拖拽排序的菜单、图片排序等。对于腾讯云相关产品,推荐使用腾讯云的云服务器(CVM)来搭建网站或应用,腾讯云云数据库(TencentDB)来存储数据,腾讯云对象存储(COS)来存储多媒体文件,腾讯云CDN来加速内容分发。具体产品介绍和链接如下:

  • 腾讯云云服务器(CVM):提供高性能、可扩展的云服务器实例,适用于各种应用场景。产品介绍链接
  • 腾讯云云数据库(TencentDB):提供稳定可靠的关系型数据库服务,支持多种数据库引擎。产品介绍链接
  • 腾讯云对象存储(COS):提供安全可靠的对象存储服务,适用于存储和管理各种非结构化数据。产品介绍链接
  • 腾讯云CDN:提供全球加速的内容分发网络,加速网站和应用的内容传输。产品介绍链接

通过使用腾讯云的相关产品,可以实现可排序功能的部署和运行,并获得稳定可靠的云计算服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

html5鼠标拖动排序及resize实现方案分析及实践

列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素鼠标拖拽效果。...HTML5中直接提供了拖放API,只要通过监听元素拖放事件就能实现各种拖放功能。 拖放(Drag和 drop)是 HTML5 标准组成部分。...为了使元素拖动,必须把 draggable 属性设置为 true : test[object Object] 整个拖拽事件触发顺序如下...text/uri-list 注:如果给定类型数据不存在,则将其添加到拖动数据存储末尾,使得dataTransfer.types列表最后一个项目将是新类型。...files属性 返回拖拽文件列表,是一个FileList对象,有length属性,可通过下标访问。此功能可用于将文件从用户桌面拖动到浏览器。一般配合FileReader来处理文件。

3.1K10

drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI(interactjs更加纯粹)。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素鼠标拖拽效果。...为了使元素拖动,必须把 draggable 属性设置为 true :testdraggable属性:设置元素是否拖动。...,拖拽对象离开目标对象时触发拖动事件列表每一个拖动元素,在拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束在拖动目标上触发事件 (源元素-拖动元素):ondragstart...它返回一个我们在dragstart事件中设置拖动数据格式数组。 格式顺序与拖动操作中包含数据顺序相同。files返回拖动操作中文件列表。包含一个在数据传输上所有可用本地文件列表。...,数据列表可以枚举,但是数据本身不可用且不能添加新数据。

6.4K21
  • (长文预警) 你还在烦工作中碰到拖拽问题?一个框架jiejue

    handle 选项 为了使列表拖动,Sortable禁用用户文本选择。这并不总是可取。...在1.8.0之前,它可能需要true嵌套排序才能起作用 removeCloneOnHide 选项 如果设置为false,则通过将其CSS display属性设置为来隐藏克隆none。...默认情况下,此选项为true,这意味着Sortable在应该被隐藏时将从DOM中删除克隆元素 emptyInsertThreshold 选项 拖动时鼠标必须与一个空排序对象之间距离(以像素为单位...),以便将拖动元素插入到该排序对象中。...交换插件 该插件修改了Sortable行为,以允许项目彼此交换不是进行排序。一旦开始拖动,用户就可以将其拖动到其他项目上,并且元素不会发生任何变化。但是,用户放置项目将与原始拖动项目交换 ?

    7.1K10

    dragula插件web端和移动端拖拽排序

    : 设置非常简单 没有外部依赖 可以自动对数据进行排序 移动带有半透明视觉效果 支持移动触摸设备 兼容性好,支持IE7+所有现代浏览器 安装 可以通过bower或npm来安装该元素拖放插件。...) 默认情况下,dragula允许用户在containers中拖动一个元素,并将元素放置到containers列表其它容器中。...dragula(containers, { moves: function (el, container) { return true; //默认情况下,元素总是拖动...sibling元素可以为null,这会使元素放置到容器最后一个位置。注意:如果options.copy设置为true,el元素会被设置为一个副本,替代原始拖放元素。...3. options.copy:如果copy设置为true,元素将被复制不是拖动

    2.4K10

    WordPress 分类如何实现拖动排序

    另外由于 WordPress 分类是层级,在多层情况下怎么实现拖动排序?在分类层级非常复杂情况下,怎么方便管理和排序呢?...分类拖动排序 有了层级管理分类,那么排序功能也就好开发了,首先在菜单「WPJAM」> 「分类设置」开启拖动排序: 由于 WordPress 分类是层级,直接在多层进行拖动排序是非常麻烦,所以这里降低了一下维度...点击「下一级」进入该分类子分类列表时进行拖动操作: 在前端显示时候,如果调用参数没有显式设置分类排序参数,默认就是按照后台拖动排序之后顺序进行输出。...支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码暴力破解等功能。 分类管理 层式管理分类和分类拖动排序,支持设置分类层级。...文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置 Meta 数据: Post Meta,Term Meta

    1.7K30

    表格控件:计算引擎、报表、集算表

    同时,可以将某个工作表(Worksheet)配置 rightToLeft 为 true,将从整体外观上形成从右到左形式,如下图: 富文本支持项目符号列表 作为富文本格式一部分,现在支持使用无序项目符号和有序编号列表...开发人员只需将 Workbook 类incrementalCalculation 属性设置为 true。还有一个状态栏显示了这个计算过程。...保护状态下隐藏公式 现在可以使用 Style 类隐藏属性或 CellRange 类隐藏方法来控制受保护工作表中公式单元格可见性。...分组还支持在分组和基础列之间进行排序。...原始字段类型 当一个字段分组时,它被视为一个分组字段。 即使在分组后,原始字段仍然保持为正常字段。 日期字段重新分组 重新分组需要使用原始字段的确切名称。

    11810

    快速入门Tableau系列 | Chapter02【数据前处理、折线图、饼图】

    上图标记一些解释: 1、原始数据只能隐藏 2、删除,标题头修改 自定义拆分数据如下图: ?...5.3 某年电影数量与票房比较分析 ①列:拖动“ 上映日期 ”至筛选器,筛选出2015年。然后再拖动数据处“ 上映日期 ”。之后,点击下拉列表,显示为月。这时方能显示出2015年各月情况。...②画环形图: 1、将“总计(记录数)”拖至列,再CTRL+鼠标拖动形成“总计(记录数)2,或者重复拖动两次” ? 2、点击总计(记录数)下拉列表->度量->最小值 ?...6、调整小饼图大小,添加数据 ? ? 那么为什么不推荐用自动做饼图呢?我们看下面 ? 上图为自动生成图形,看着是没什么问题,但是如果我们把内环颜色去掉看看: ?...最后我们再把外环拉大点,然后把内环只保留一个角度总和即可。鉴于此有些麻烦,所以说推荐使用标记来手动制作不推荐采用自动生成图形方式

    2.8K31

    WordPress 全能分类管理插件:WPJAM Taxonomy

    三、分类拖动排序: 有了层级管理分类,那么分类就好排序了,首先在菜单「WPJAM」> 「分类设置」开启之后,就可以实现分类拖动排序: 在前端显示时候,如果调用参数没有显式设置分类排序参数,默认就是按照后台拖动排序之后顺序进行输出...,通过它可以过滤后台文章列表,比如下图就是通过标签筛选文章列表: 七、文章列表多重筛选 如果简单过滤不能找到你所需文章,那么多重筛选功能肯定可以帮到你。...支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码暴力破解等功能。 分类管理 层式管理分类和分类拖动排序,支持设置分类层级。...并且在后台分类管理界面可以按层级显示和拖动排序。 评论增强 支持评论点赞,评论置顶和按照点赞数排序。 图片集 1. 给媒体创建个分类「图片集 | collection」 2....文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置 Meta 数据: Post Meta,Term Meta

    1.3K20

    Keep It for mac(Mac笔记工具)

    现在也可以始终显示Kind,并完全隐藏日期。和更多…查看未归档项目和没有标签项目。 在PDF中查找文本已得到改进,您现在可以看到突出显示何时有注释。...Markdown预览中屏蔽代码块有语法着色,拖动或粘贴Markdown链接。...查看和编辑列表摘要和增强缩略图,Mac和iOS备注和改进文件附件预定义样式在选项卡或自己窗口中编辑笔记在“信息”视图中查看并搜索标签列表,以及在列表中标记项目时自动重命名从文具创建项目紧凑模式可以与其他应用程序一起作为窗口或分割视图工作单个项目的...iCloud共享组织和管理收藏栏快速访问列表文件夹可以显示嵌套文件夹和软件包中所有项目记录列表显示所有Mac和iOS设备上添加和修改项目选择多个项目显示选项将其添加到包,移动到文件夹,更改标签或添加标签每个列表都可以有自己排序设置侧边栏可以隐藏...,并且当您拖动到窗口一边时将重新出现输入共享扩展程序现在可以添加文本,链接,文件,照片和电影,并且在使用它时,您可以添加标签,选择位置,并将文本附加到笔记。

    1.5K30

    UG常用快捷键

    捕捉手柄至 WCS 将拖动手柄移到 WCS 位置。此选项只影响手柄,不移动任何对象。运动记录首选项 打开运动首选项对话框,可在其中设置影响运动步骤和帧首选项。...从“装配排序”工具条或“序列导航器”中序列节点弹出菜单上选择“创建新序列”。 该新序列出现在序列导航器中,文件夹命名为“忽略”和“预装”(后者包含该装配中所有组件)。...使用忽略弹出选项或者通过拖动方式,将序列中不用任何组件从“预装”文件夹移到“忽略”文件夹。 6....拆装剩余组件或希望拆装成步骤节点子组,方法是使用弹出菜单选项、工具条命令、层叠菜单选项或通过拖动实现。 在高亮显示步骤节点(释放 MB1 时)之后,将一个组件会作为拆装步骤添加。...可以使用下列方法之一来更改“序列导航器”中列: o 在列层叠菜单(在“序列导航器”背景弹出菜单上)内通过切换显示或隐藏列。

    3.5K40

    Sketch 92 mac中文版专业矢量绘图设计软件

    最顶端工具箱包含了最重要操作,可根据个人习惯添加排列。Sketch还拥有专门开发人员社区,不断创造新扩展插件,来帮助设计师提高工作效率。...图片sketch mac中文版安装教程安装包下载完成后,将左侧Sketch拖动到右侧应用程序中,即可完成安装。...当您将鼠标悬停在整齐组内图层智能分布重新排列手柄上时,我们现在隐藏所有其他可见手柄,让您可以清晰地查看您设计。...当您选择属于​​具有均匀间距图层时,您现在可以使用智能分布对其重新排序并调整间距。以前,这只有在您先选择组本身时才有可能。...当您在画板之间复制图层时,通过复制和粘贴命令或通过在图层列表拖动图层,我们现在可以更准确地保留图层原始位置。

    52710

    WPJAM「用户管理插件」新增记录用户最后登录时间功能

    WPJAM「用户管理插件」新增记录用户最后登录时间功能,用户登录之后,在后台用户列表就会显示该用户最后登录时间: 然后也可以按照用户最后登录时间进行排序。...所以目前 WPJAM「 用户管理插件」已有如下十几个功能了: 屏蔽个人设置 屏蔽姓名设置 显示名称设置 隐藏登录名 开启别名设置 开启登录限制 以此身份登陆 按注册时间排序 用户最后登录时间 自定义用户头像...支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码暴力破解等功能。 分类管理 层式管理分类和分类拖动排序,支持设置分类层级。...并且在后台分类管理界面可以按层级显示和拖动排序。 评论增强 支持评论点赞,评论置顶和按照点赞数排序。 图片集 1. 给媒体创建个分类「图片集 | collection」 2....文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置 Meta 数据: Post Meta,Term Meta

    1K20

    Vue.Draggable 文档总结

    格式为简单css选择器字符串,定义哪些列表单元可以进行拖放 ghostClass: selector 格式为简单css选择器字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟拖动单元排序情况...当排序容器是个滚动区域,拖放可以引起区域滚动 scrollFn:function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl...添加单元时回调函数 onUpdate: 排序发生变化时回调函数 onRemove: 单元移动到另一个列表回调函数 onFilter: 尝试选择一个filter过滤单元回调函数...: 移动单元 clone: 副本单元 oldIndex:移动前序号 clone function,默认值: 无处理 这一要配合着optionsgrouppull处理...moved:内部移动 newIndex: 改变后索引 oldIndex: 改变前索引 element: 移动元素 插槽 提供一个footer插槽,在排序列表之下

    9K20

    前端里拖拖拽拽了解一下?

    元素是否允许拖放且响应 API 操作依赖于 draggable[2] 全局标签属性 draggable 是一个布尔值类型标签属性: true:元素可被拖拽 false:元素不可拖拽 当元素设置了...dragendondragend当拖动元素释放(️松开、按键盘 ESC)时拖拽dragenterondragenter当拖动元素到一个释放目标元素时放置dragexitondragexit当元素变得不再是拖动操作选中目标时放置...dragleaveondragleave当拖动元素离开一个释放目标元素放置dragoverondragover当元素拖到一个释放目标元素上时(100 ms/次)放置dropondrop当拖动元素在释放目标元素上释放时放置...2.1 设计实现 结合上述 Drag & Drop 事件类型,那么拖拽排序主要是针对“拖动对象”之间相互作用关系逻辑梳理,此处我们暂且区分为: 源对象: 拖拽列表中被拖动单个列表项 目标对象:...= "1"; }; 2.2 实现效果 2.3 加点动画 上面的实现中效果还算可以,但是少了拖拽切换过程动画,直接在 dragover 事件中通过 move(dragId, dropId) 方法直接修改了原列表数据排序

    4.9K30

    【Scratch入门到精通】blocks 积木区风格定制

    由于scratch-blocks基于blockly二次开发,blockly已迭代多个版本,在使用上会有所差异,后续作者会有文章,结合源码单独讲解blockly使用。 1.1....(不包括积木分类菜单遮住部分),随着滚动条滚动,可视工作区中内容在变化,但是可视工作区整体宽度/高度是不变。...积木分类菜单 左侧积木分类列表菜单 积木弹出列表 点击积木分类菜单才弹出积木块列表,宽度固定为250 工作区坐标 工作区有一个坐标系,积木放置位置都是在这个坐标系中。 1.3....引入google-closure-library google-closure-library 是一个功能强大低级 JavaScript 库,旨在构建复杂且扩展 Web 应用程序。...滚动条可见性 工作区没有任何积木时,期望滚动条隐藏不可见。

    2.5K20

    在 WordPress 后台如何使用分类和标签进行过滤文章列表

    WPJAM 分类管理插件 WPJAM「#分类管理插件#」是 WordPress 果酱出品付费插件,目前主要有「层式管理分类」,「设置分类层级」,「分类拖动排序」,「分类数字ID固定链接」,「首页文章分类过滤...支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码暴力破解等功能。 分类管理 层式管理分类和分类拖动排序,支持设置分类层级。...并且在后台分类管理界面可以按层级显示和拖动排序。 评论增强 支持评论点赞,评论置顶和按照点赞数排序。 图片集 1. 给媒体创建个分类「图片集 | collection」 2....文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置 Meta 数据: Post Meta,Term Meta...文章置顶 支持置顶文章排序和分类文章置顶 WordPress 插件

    3.5K30

    SaaS平台:数据列表设计

    点击该图标,进行升序、降序上排列。 不同地方在于,例如图中所示,增加了序号排序方式。序号上可以输入数字,客户基于序号大小进行排序。...列字段展示特点: 可通过【列展示】弹窗,对列字段进行是否显示、排序设置;设置方法为拖动 展示列字段过多时,拖动底部滚动条。无法使用鼠标滚动方式进行滑动。...例如:针对客户级别的排序中,则分为了A(重点客户)B(普通客户)C(非优先级客户)空四种筛选方式。纬度精准排序,则给定了一个纬度范围。 对比易订货发现,其实两个平台都有列字段显示、隐藏排序功能。...(这里有一个Bug:当想要把非锁定状态下列字段,拖动到所有非锁定列字段最前面时,其实是做不到。实际拖动是非锁定列字段第二位。) 双击单个区域,灵活编辑某个行列交叉内容。...不同SaaS列表设计,往往是基于业务、数据、资源、操作等层面,所谓最优选项也会在资源和成本压力下否决。我们可以认为,没有最优、只有最适合数据列表设计方案。

    2.1K10

    WordPress 标签固定链接可以使用 ID 吗?

    ,目前主要有「层式管理分类」,「设置分类层级」,「分类拖动排序」,「分类数字ID固定链接」,「首页文章分类过滤」,「后台文章分类筛选过滤」和「文章列表分类多重筛选」七大功能。...支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码暴力破解等功能。 分类管理 层式管理分类和分类拖动排序,支持设置分类层级。...并且在后台分类管理界面可以按层级显示和拖动排序。 评论增强 支持评论点赞,评论置顶和按照点赞数排序。 图片集 1. 给媒体创建个分类「图片集 | collection」 2....文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置 Meta 数据: Post Meta,Term Meta...文章置顶 支持置顶文章排序和分类文章置顶 WordPress 插件

    1.3K20

    Qt音视频开发49-通用截图截屏

    不是yuv数据opengl绘制,海康sdk调用NET_DVR_CapturePicture函数即可。...一般来说截图都是保存原始图片,对应分辨率也是原始分辨率,并没有压缩及等比例缩放过,所以ffmpeg监控内核必须是最原始采集到图片为准,不是最终绘制后图片,因为绘制后很可能已经缩放过...顶部鼠标右键菜单,动态控制时间CPU+左上角面板+左下角面板+右上角面板+右下角面板显示和隐藏,支持恢复默认布局。 工具栏可以放置多个小图标和关闭图标。...左侧右侧拖动拉伸,并自动记忆宽高位置,重启后恢复。 双击摄像机节点自动播放视频,双击节点自动依次添加视频,会自动跳到下一个,双击父节点自动添加该节点下所有视频。...视频拖动到通道窗体外自动删除视频。 鼠标右键删除当前+所有视频,截图当前+所有视频。 录像机管理、摄像机管理,添加删除修改导入导出打印信息,立即应用新设备信息生成树状列表,不需重启。

    1.6K30
    领券