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

jQuery sortable:如何正确发布元素id数组?

在jQuery中,可以使用sortable插件对元素进行排序。要正确发布元素ID数组,可以使用以下步骤:

  1. 首先,确保已经在项目中引入了jQuery和sortable插件。
  2. 在HTML中,为可排序元素添加一个容器,并为每个元素分配一个唯一的ID。
代码语言:html
复制
<ul id="sortable">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
</ul>
  1. 在JavaScript中,使用sortable方法对容器中的元素进行排序,并使用toArray方法将排序后的元素ID存储到一个数组中。
代码语言:javascript
复制
$(function() {
  $("#sortable").sortable({
    stop: function(event, ui) {
      var sortedIDs = $("#sortable").sortable("toArray", { attribute: "id" });
      console.log(sortedIDs);
    }
  });
});

在这个示例中,当排序停止时,会触发stop事件。在事件处理程序中,我们使用toArray方法将排序后的元素ID存储到sortedIDs数组中。attribute选项指定我们要提取的属性,这里是ID。

现在,每当元素排序发生变化时,sortedIDs数组都会包含排序后的元素ID。您可以根据需要处理此数组,例如将其发送到服务器进行存储。

请注意,这个示例中没有提到其他云计算品牌商,因为它是一个纯粹的jQuery和sortable插件的问题。如果您需要与云计算相关的解决方案,请提供更多详细信息。

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

相关·内容

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

Sortablejs 简介 Sortable —是一个JavaScript库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。...,还是可以从中添加元素的组名数组 revertClone:boolean—在移动到另一个列表后,将克隆的元素恢复到初始位置 dragUlKey() { const ulKey = document.getElementById...默认情况下为false,但是Sortable仅在将元素插入父Sortable或可以插入父Sortable时才停止冒泡事件,但不在特定时间(由于动画等) 。...它们可以单独导入,也可以将默认导出(两个插件的数组)传递给Sortable.mount它们。...bubbleScroll 选项 如果设置为true,则普通autoscroll功能还将应用于用户拖动的元素的所有父元素 // html <div id="content" class="outer

7K10

Vue.Draggable 文档总结

本文章转自https://blog.csdn.net/zjiang1994/article/details/79809687 Vue.Draggable学习总结 Draggable为基于Sortable.js...特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的...{          id: 3,          name: 'c'       },       {          id: 4,          name: 'd'      ...},       {          id: 5,          name: 'e'       },       {          id: 6,          name...: 'f'       },     ]   } 属性 value Array,非必须,默认为null 用于实现拖拽的list,通常和内部v-for循环的数组为同一数组

8.5K20

商城项目-从0开始品牌的查询

数组的每个元素就是一个表头信息对象,结构: { text: string, // 表头的显示文本 value: string, // 表头对应的每行数据的key align: 'left...string,// 宽度 } items:表格的数据的数组数组的每个元素是一行数据的对象,对象的key要与表头的value一致 loading:是否显示加载数据的进度条,默认是false...items:要在表格中展示的数据,数组结构,每一个元素是一行。...接下来,去页面请求数据并渲染 7.3.异步查询工具axios 异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery。...但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分。因此不可能为了发起ajax请求而去引用这么大的一个库。

4.7K20

jQuery基础(五)一Ajax应用与常用插件-imooc

常用插件 本章节先通过示例与插件相结合的方式,详细介绍了目前最为流行的各类插件的使用方法和技巧,包括表单插件、图片插件等;然后,介绍了如何自定义编写对象和类级别插件的过程。  ...,调用格式为: $(Id).focusColor(color) 其中,参数Id表示元素Id号,color表示元素选中时的背景色 <script type="text/javascript...例如,在页面中,通过调用droppable插件将“产品区”中的<em>元素</em>拖曳至“购物车”中,同时改变“购物车”的背景色和数量值,如下图所示: 3-3拖曳排序插件——<em>sortable</em> 拖曳排序插件的功能是将序列<em>元素</em>...(例如、)按任意位置进行拖曳从而形成一个新的<em>元素</em>序列,实现拖曳排序的功能,它的调用格式为: $(selector).<em>sortable</em>({options}); selector参数为进行拖曳排序的<em>元素</em>...,options为调用方法时的配置对象, 例如,在页面中,通过加载<em>sortable</em>插件将<em>元素</em>中的各个表项实现拖曳排序的功能,如下图所示: 在浏览器中显示的效果: 3-4面板折叠插件—

16.5K20

深入浅出 Vue 中的 key 值

从前篇文章说起 前几天我写了一篇文章,sortable.js——Vue 数据更新问题 ,当时自己只是从数据的强制刷新角度去分析,而且并没找到真正的“元凶”。...很感谢有人帮我指出,可能是 Vue 的 key 值,导致数据渲染不正确的。由此,我做了进一步的尝试。...根据上篇文章,我们还是用 sortable.js 作为例子讨论。...之所以会造成上面渲染错误的情况,是因为我们的 key 值不是独特的,比如上面的 key 值,在调整数组顺序后就每一项原来的 key 值都变了,所以导致了渲染错误。...比如现在有一个数组 [1,2,3,4]变成了[2,1,3,4],那么没有 key 的值会采取一种“就地更新策略”,见下图。它不会移动元素节点的位置,而是直接修改元素本身,这样就节省了一部分性能 ?

1K10

2018-07-161 初识JQuery

jQuery 每一个系列版本分为:压缩版(compressed) 与 开发版(development),我们在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版本体积更小...代码分析 $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用...通过一个简单的例子,简单区分下jQuery对象与DOM对象: 我们要获取页面上这个id为sss的p元素,然后给这个文本节点增加一段文字:“您好”,并且让文字颜色变成红色...在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是可以操作的DOM元素jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素如何jQuery对象转成DOM对象?...用jQuery找到所有的div元素(3个),因为jQuery对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象,调用它的style属性修改第一个div元素的颜色 通过

46110

jquery对象和dom对象的相互转换

1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对 象(集合对象),不能直接调用dom....innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而...set和get   Jquery中的很多方法都是如此,主要包括如下几个: $("#msg").html();     //返回id为msg的元素节点的html内容。... $("#msg").height();     //返回id为msg的元素的高度 $("#msg").height("300");   //将id为msg的元素的高度设为300 $("#msg...可以有多个参数(合并多项并返回) $.map(array, fn):数组映射。把一个数组中的项目(处理转换后) 保存到到另一个新数组中,并返回生成的新数组

3.2K40

Golang 中泛型的支持

我们这里打算以一些例子来讲解Golang中如何处理这个问题。 首先,我们看一个冒泡排序的问题。针对整型数组切片的排序。...针对上面的排序问题,我们可以分析一下排序的步骤: 查看切片长度,以用来遍历元素(Len); 比较切片中的两个元素(Less); 根据比较的结果决定是否交换元素位置(Swap)。...复制代码 输出结果为: 复制代码 上面的例子中,我们首先定义了一个IntArr类型的整型切片类型,然后让这个类型实现了Sortable接口,然后在测试代码中,这个IntArr类型就可以直接调用Sortable...和IntArr类型一样,它实现了Sortable即可定义的方法,然后就可以用Sortable即可的bubbleSort方法来排序了。 总结 上面的例子,是一种Golang中支持所谓的“泛型”的方法。...[1 2 3 4 6 10] [i am go lang hello] package main import ( "fmt" ) type Sortable interface

1.2K130
领券