将顺序设置为 jquery 可排序

2024-01-31

我使用 jquery Draggable 函数来处理无序列表(ul),并面临着获取项目更改后的顺序以及设置页面加载后的顺序的问题。假设我们有以下代码:

<html>
   <head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>  </script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
      $(document).ready(function(){
            $('.secondblock').sortable({axis:'y'});

            $(".block").sortable({
            axis: 'y',
            update: function(event, ui) {// order changed
               var order = jQuery(this).sortable('toArray');
               // set this order to .secondblock

            }
         });
      });
  </script>

  </head>
  <body>
      <ul class="block" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
      <ul class="secondblock" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
  </body>

有没有可能的解决方案?


首先,同一个 id 不应该在文档中出现两次。这会导致各种各样的问题。

相反,在第二个列表中的项目上设置数据属性以反映第一个列表中的相应项目:

<ul class="block" type="none">
    <li id = "one">1</li>
    <li id = "two">2</li>
    <li id = "three">3</li>
    <li id = "four">4</li>
    <li id = "five">5</li>
</ul>
<ul class="secondblock" type="none">
    <li data-block-id = "one">1</li>
    <li data-block-id = "two">2</li>
    <li data-block-id = "three">3</li>
    <li data-block-id = "four">4</li>
    <li data-block-id = "five">5</li>
</ul>

然后在第二个列表中反映第一个列表的排序很简单:

$('.block').sortable({update: sortOtherList});

function sortOtherList(){
    $('.block li').each(function(){ 
        $('.secondblock [data-block-id=' + $(this).attr('id') + ']')
            .remove()
            .appendTo($('.secondblock'));

    });
}

在这里查看它的工作情况:http://jsfiddle.net/6HKZG/2/ http://jsfiddle.net/6HKZG/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将顺序设置为 jquery 可排序 的相关文章

  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • Twitter Bootstrap 轮播在加载时自动播放

    使用twitter bootstrap框架 如何调用轮播来 自动滑动 这意味着当页面加载时 轮播会自动滚动 我尝试过 javascript onLoad click 函数 a 下一个链接的 但这不起作用 你应该这样做Twitter Boot
  • 语法:const {} = 变量名,任何人都可以解释或指出我正确的方向[重复]

    这个问题在这里已经有答案了 这个语法在 JavaScript 中意味着什么 可能是 ES6 const 变量名 我目前正在尝试掌握 React 在很多例子中我都遇到过这种语法 例如 const girls guys women men st
  • JavaScript 原型 - 请澄清

    有人可以帮我理解原型属性吗 我不明白原型属性是函数的属性还是函数内部的属性 假设我们创建以下构造函数 Food 此时 函数 Food 具有 Food prototype 属性 由于 Food 是 Object 的实例 因此这意味着 Obec
  • 如何删除从 javascript var 转义的反斜杠?

    我有这个变量 var x div class Which is div class 但是我需要 div class abcdef 我怎样才能 unes cape 这个变量来删除所有转义字符 您可以通过正则表达式将反斜杠后跟引号替换为仅引号
  • FormData 中的 Blob 为 null

    我正在尝试通过远程 API 通过 ajax 在 android 中发送创建的照片 我在用着相机图片背景 https github com an rahulpandey cordova plugin camerapicturebackgrou
  • Famo.us 滚动视图高度

    我正在尝试使用著名的顺序布局在滚动视图下方添加图像 但滚动视图的高度有问题 这就是我创建滚动视图的方式 var scrollview new Scrollview direction Utility Direction X options
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • 将数组中的所有元素相乘

    我在这里找不到我真正想要的例子 我想将所有数组元素相乘 因此如果数组包含 1 2 3 总和将为 123 6 到目前为止 我已经得到了这段代码 但它返回未定义 function multiply array var sum 1 for var
  • AngularJS:在部分视图出现之前触发 $viewContentLoaded

    对于部分视图 我想做一些我通常会做的 JavaScript 事情 document ready function 例如将 venet 侦听器绑定到元素 我知道这对于 AngularJS 和加载到 根 视图中的部分视图不起作用 因此 我向控制
  • 很奇怪!调用 window.location 或 location.replace 会重定向到该页面,然后再次返回!

    我处于调试模式 因此我可以看到正在访问哪个页面 当我打电话时window location or window location replace 它会转到该页面 然后返回原始页面 怎么会这样 解决方案是添加 window location
  • Jquery 自动完成 - 预填充文本字段

    我有一个自动完成字段 改编自地理自动完成以查找地理位置 当用户从列表中选择位置时 我会获取纬度 经度和用于搜索的其他一些信息 然而 现在只有当用户实际从自动完成列表中进行选择时它才有效 而不是开始键入并单击 Enter 例如他们尚未从列表中
  • 表单序列化javascript(无框架)

    想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We
  • 如何上传文件 - sails.js

    我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时 仅将其下载为 ZIP XML 文件 我可以做什么 我在用着 填写上传文件文档 https github com balderda
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
  • 在多个数组中搜索字符串,然后设置 var - jQuery

    我正在寻找基于字符串存在于哪个数组中设置一个变量 例如 var primary red blue yellow var secondary orange purple green 然后检查 purple 并返回它在 secondary 数组
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • Morgan Logger + Express.js:写入文件并在控制台中显示

    我正在尝试将 Morgan 与 Express js 结合使用来编写日志文件 同时也在控制台上显示我的日志 我正在使用这段代码 var logger require morgan var accessLogStream fs createW
  • 使用Jquery(或js)在html表格上循环遍历列的单元格(不是行的单元格)?

    使用 jQuery 循环遍历单元格或行很简单 但循环遍历列的单元格并不简单 for cells of rows I will do this table tr each function index elem loop through ce
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将

随机推荐