jquery-ui-sortable 相关问题

如何与sortable()一起实现Jquery数据表

我正在尝试实现数据表来创建一些时间表，并且表中的行是可拖动的。我使用 sortable 来实现这个功能 这是我的 html 代码。 我正在尝试实现数据表来创建一些时间表，并且表中的行是可拖动的。我使用 sortable 来实现这个功能 这是我的 html 代码。 <link href="~/NewFolder1/jquery.dataTables.min.css" rel="stylesheet" /> <link href="~/NewFolder1/dataTables.tableTools.css" rel="stylesheet" /> <link href="~/mycss/Sortable.css" rel="stylesheet" /> <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="~/NewFolder1/jquery-1.10.2.js"></script> <script src="~/NewFolder1/jquery-ui.js"></script> <script src="~/JScripts/jquery.dataTables.min.js"></script> <script src="~/NewFolder1/dataTables.tableTools.js"></script> <script src="~/JScripts/Sortable.js"></script> <div id="Dataelements"> <div id="Left-Content" style="width:50%;float:left;"> </div> <div id="Right-Content" style="width:49.5%;float:left;" > <table id="example" class="display"> <caption>Create Your Template</caption> <thead> <tr> <td>ID</td> <td>Name</td> <td>Duration</td> </tr> </thead> <tbody id="sortable" > </tbody> </table> </div> </div> <br /><br /> <hr /> <input type="submit" value="submit" id="button1"style="text-align:center;margin-top:50px;float:left;" /> 现在我的 JS 文件中的一些代码是 $("#sortable").sortable(); $('table#example').dataTable({ "aaSorting": [], }); var table = $('table#example').dataTable().api(); $("#button1").click(function () { var rows = $("#example").dataTable().fnGetNodes(); var cells = []; for (var i = 0; i < rows.length; i++) { cells.push($(rows[i]).find("td:eq(0)").html()); } alert(cells); }); 现在，在我单击按钮后，我正在检索表格的第一列 假设在起始表= 1 HTML 2 2 PHP 5 3 JS 4 拖动并更改顺序后 2 PHP 5 3 JS 4 1 HTML 2 但是当我单击“提交”按钮时，我得到的输出为 1,2,3，而不是 2,3,1 有什么方法可以在拖动并更改顺序后保存行的状态。 该代码对于普通表工作正常，但对于数据表则不行 jQuery UI 可排序功能包含一个序列化方法来执行此操作。这真的很简单。这是一个简单的示例，一旦元素位置发生更改，就会将数据发送到指定的 URL。 $('#element').sortable({ axis: 'y', update: function (event, ui) { var data = $(this).sortable('serialize'); // POST to server using $.post or $.ajax $.ajax({ data: data, type: 'POST', url: '/your/url/here' }); } }); 它的作用是使用元素 id 创建一个元素数组。所以，我通常会这样做： <ul id="sortable"> <li id="item-1"></li> <li id="item-2"></li> ... </ul> 当您使用序列化选项时，它将创建一个 POST 查询字符串，如下所示：item[]=1&item[]=2 等 例如，在 PHP 中： foreach ($_POST['item'] as $value) { // do smth } 我的代码中有类似的东西并且它有效 (function(){ $('#datatable-ui').DataTable({ "fixedHeader": true, "responsive": true, "paging": false, "info": false, "aaSorting": [[ 1, "asc" ]], }); // http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/ var fixHelper = function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; }; $("#datatable-ui tbody").sortable({ helper: fixHelper, update: function(event, ui) { $("#datatable-ui tbody tr").each(function(index){ $.ajax({ url: '{{ route('owner.item.position') }}', type: 'POST', data: 'restaurant_id='+$(this).data('restaurant-id')+'&item_id='+$(this).data('item-id')+'&position='+(index+1) }) .done(function (response) { console.log(response); }) .fail(function (jqXhr) { console.log(jqXhr); }); }); } }).disableSelection(); })(jQuery); 我正在从 tr 获取数据属性 @foreach($items as $item) <tr data-sortable="{{ $item->position }}" data-restaurant-id="{{ $restaurant->id }}" data-item-id="{{ $item->id }}"> 在 PHP 网站上它是标准的更新功能。 我相信最好的方法是使用数据表行重新排序功能

Jquery UI 可排序，按钮不能用作句柄

我正在尝试对表中的 tr 进行排序。 代码 $("表体").sortable({ 手柄：“按钮” //句柄：'img' }).disableSelection(); 现场小提琴 现在的问题是当使用 img 来处理它的时候

Sortable toArray() 有时会创建末尾有重复项的列表

我想使用一个表单让用户对项目列表进行排名，并将排名存储在一个名为“ranking”的表单字段中。我为此使用“Sortable”和“toArray”： 我想使用一个表单让用户对项目列表进行排名，并将排名存储在名为 ranking 的表单字段中。我为此使用“Sortable”和“toArray”： <ul id="items" class="list-group list-group-numbered" style="cursor: move"> <li data-id="1" class="list-group-item list-group-item-action">Option 1</li> <li data-id="2" class="list-group-item list-group-item-action">Option 2</li> <li data-id="3" class="list-group-item list-group-item-action">Option 3</li> <li data-id="4" class="list-group-item list-group-item-action">Option 4</li> <li data-id="5" class="list-group-item list-group-item-action">Option 5</li> </ul> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> <script> let el = document.getElementById('items'); let sortable = Sortable.create(el, { animation: 150, onChange: function (evt) { forminputs.ranking.value = sortable.toArray().join(','); } }); </script> <input type="hidden" name="ranking" id="ranking"> 在数据中，变量ranking主要存储包含要排序的项目的IDs的字符串。然而，偶尔（在我的数据中大约有 10%），它会存储一个字符串，其中一个 IDs 出现两次，即，与我的预期相比，该数组具有 length+1 。重复的 ID 总是出现在数组的末尾，即，如果出现 n+1 元素，则前 n 元素是唯一的，第 n+1 元素是以下元素之一的重复项之前的元素。 我期望每个输入都有一个恒定长度的数组。我尝试自己复制它，但失败了。这可能是与特定浏览器相关的问题吗？由于重复项始终位于末尾，我是否可以假设前 n 元素代表用户提交的实际排名？ jQuery-UI Sortable 在拖动时使用占位符元素来指示放置插入位置。也许您正在读出该内容，因为您正在使用 OnChange 事件来读出（可以识别占位符元素，因为它带有类 ui-sortable-placeholder）。当用户不断拖动元素时，onChange可以被触发多次。 您可能想在 onUpdate 事件中读出最终序列，该事件每次拖放仅触发一次。请参阅：https://api.jqueryui.com/sortable/#event-update

Jquery-ui 可排序的占位符卡在顶部

我对 jquery-ui sortable 的占位符有疑问。 我正在尝试对 div 集合进行排序，并添加一个占位符来放置它。 目前，占位符似乎是“stuc...

让 jQuery 排序更流畅

我第一次使用 jQuery 可排序。我试图让排序更顺畅一点，但在在线doku中找不到任何内容。问题是，jQuery 可排序仅产生一个占位符...

ASP.NET MVC。实现持久排序的干净方法？

我还没找到ASP.NET MVC中通过分页实现排序的例子 （按名称排序->按第2页->第2页仍按名称排序）。 我可以“破解”它，让它变脏，但我确信

如何使 jQuery UI 可通过嵌套下拉菜单进行排序？

我已阅读与此处发布的问题类似的所有内容，但没有找到任何解决方案。 我创建了一个菜单，在下拉菜单中包含子菜单条目。所有菜单条目都可分类到所有菜单级别。 ...

拖动多个项目时 jQuery 索引返回 -1

我有两个表，我可以使用可排序来拖放多个元素。我的问题是，当我有时将表 2 中的项目拖动到表 1 中时，ui.item.index() 返回 -1。 经过一些测试后我

可对多个选定项目进行排序

我有两个表，我希望能够一次拖放多个项目。用户通过复选框选择项目，然后可以将它们拖放到同一个或另一个表中。 我知道是这样

检测可排序项目来自的表

我有两个表格，可以在表格之间拖放项目，也可以在同一个表格内拖放项目。我想检测该项目来自的表。 接收事件仅在

使用 yii-jui 进行 Ajax 更新后的 JQuery 可排序初始化

我遇到了一个问题，正在寻找在不改变 Yii2 框架的情况下解决它的最佳方法。 我有一个页面，其中包含可以排序的元素。我正在使用 yii-jui 可排序...

Jquery ui 可排序表行与特定静态列

我在表上的 jquery 可排序方面遇到问题。我的桌子是这样的： <... 我在表上的 jquery 可排序方面遇到问题。我的桌子是这样的： <table> <thead> <th>Number</th> <th>Text</th> <th>Order</th> </thead> <tbody id="sortable" data-bind="foreach: fruits"> <tr class="ui-state-default"> <td data-bind="text: number"></td> <td data-bind="text: fruit"></td> <td data-bind="text: order"></td> <tr> 我希望它可以排序，除了在订单列上，我有这个代码，但它不起作用 $( function() { $( "#sortable" ).sortable({ items: 'td:not(:nth-child(3))' } }); 例如，如果我有 数量 文字 订购 数量 水果 订购 1 香蕉 5 2 苹果 10 3 桃子 15 当我改变它时，拖动整行，我想要看起来像这样，顺序保持不变： 数量 水果 订购 2 苹果 5 1 香蕉 10 3 桃子 15 考虑替代方法。 $(function() { $("#sortable").sortable(); }); .sidebyside { float: left; margin: 0; margin-right: -1px; padding: 0; } <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script> <div style="width: 400px;"> <table class="sidebyside" style="width: 66%;"> <thead> <th>Number</th> <th>Text</th> </thead> <tbody id="sortable" data-bind="foreach: fruits"> <tr class="ui-state-default"> <td data-bind="text: number">1</td> <td data-bind="text: fruit">Banana</td> </tr> <tr class="ui-state-default"> <td data-bind="text: number">2</td> <td data-bind="text: fruit">Apple</td> </tr> <tr class="ui-state-default"> <td data-bind="text: number">3</td> <td data-bind="text: fruit">peach</td> </tr> </tbody> </table> <table class="sidebyside" style="width: 33%;"> <thead> <th>Order</th> </thead> <tbody data-bind="foreach: fruits"> <tr class="ui-state-default"> <td data-bind="text: order">5</td> </tr> <tr class="ui-state-default"> <td data-bind="text: order">10</td> </tr> <tr class="ui-state-default"> <td data-bind="text: order">10</td> </tr> </tbody> </table> <table> </div> 填充表格会需要更多工作，但它确实实现了您的目标。

将项目移动到新的可排序：如何引用我将元素拖放到其中的列表？

我有两个链接在一起的可排序列表。 我在第一个列表上有一个事件侦听器，在“sortupdate”上调用函数“A”，以便在我对列表中的项目进行排序或

拖动时 jQuery UI 排序不准确

我在使用 jQuery UI Sortable Widget 时遇到问题，它对元素放置位置有点不准确。 例子： HTML： <... 我在使用 jQuery UI Sortable Widget 时遇到问题，它对于元素的放置位置有点不准确。 示例： HTML： <div class="Container"> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div> </div> CSS： div.Container { clear: both; } div.Container div.Item { float: left; display: block; padding: 5px 5px 2px 5px; background-color: #ccc; border: solid 1px #aaa; border-radius: 5px; margin: 0 10px 10px 0; } div.Container div.Item img { width: 30px; height: auto; border: solid 1px #888; } JS： $(document).ready(function() { $('div.Container').sortable({ revert: true, cursor: 'move' }); }); JSFiddle：http://jsfiddle.net/ghdbxj7t/ 尝试直接向下拖动一个元素（在其他元素下方），然后向右拖动经过最后一个元素，然后向上拖动以再次与元素对齐。 这会导致原始元素占位符卡在其位置，并且不会移动任何其他元素。 如果您将元素与最后一个元素完全对齐（水平）拖动，您几乎可以在最后一个元素切换之前到达它的顶部（有时我什至可以走得更远）。 此示例与我在自己的网站上遇到的情况类似，但行为更为极端。我可以将第一个元素水平拖动到所有其他元素上，它们排序得很好除了最后一个元素对于何时允许自己进行排序非常敏感。 我网站上的 HTML 和 CSS 与 JSFiddle 中的几乎完全相同。 我该怎么做才能使拖动更加准确，以便拖动到最后一个项目之后的元素立即排序，而不必在最后一个项目上多次拖动它才能让它明白我想将其放置在那里？ 此行为已在 Chrome 中测试。 我正在使用 jQuery 1.11.2 和 jQuery UI 1.11.4（JSFiddle 似乎不支持这些，但 1.9.1 中的行为接近我所经历的） 7岁了，但我想我可以帮忙。但讽刺的是，我也来寻找答案，并且碰巧在弄乱你的 jsfiddle 时修复了它。从那时起您可能已经修复了它，因此这可以为其他遇到问题的人提供参考。 您可以通过添加选项 tolerance 并向其添加值 pointer 来帮助使其更加准确。 示例代码： $(document).ready(function() { $('div.Container').sortable({ revert: true, cursor: 'move', tolerance: "pointer" }); }); 这是做什么的，当您的光标与其他项目重叠时，它就会开始对其进行排序。默认情况下，它是 intersect，对我来说这似乎有问题，尽管它没有问题。当项目与其他元素重叠时，Intersect几乎可以做到这一点，它会对其进行排序。当不同的项目可能具有不同的尺寸时，这看起来会非常有问题，并且边缘项目（例如右、左、上或下）也可能看起来有问题。 由于您有一个水平可排序列表，因此您可以使用 axis 选项来限制项目的拖动移动，如下所示 $(document).ready(function() { $('div.Container').sortable({ revert: true, cursor: 'move', axis: "x" }); }); http://api.jqueryui.com/sortable/#option-axis 有一个类似的问题，当我将一个项目拖到应该可放置的区域上时，当前元素没有移到一边以为其放置腾出空间）。 花了 2 天时间浏览各种 Stackoverflow 帖子和其他在线信息源后，乔纳森的答案是解决我的可排序敏感度问题的唯一答案。谢谢乔纳森！

Jquery ui 可排序 - 以编程方式将每个 pawn 移动到它自己的位置

我一直在尝试使用jquery可排序为我的龙与地下城会话制作一个带有棋子（类似国际象棋）的简单网格系统。我正在将 Laravel 与 Blade 一起用于一个项目。 所以在下面的代码中，...

如何创建可通过操作按钮更改的反应式排名列表？

我想创建一些当用户单击操作按钮时会增加的框。 我尝试创建一个计数器，将其初始化为 1 并将其链接到操作按钮。当我尝试使用...

Jquery 可排序 - 从数据库检索元素位置并在刷新时将每个元素放置到其自己的位置

我一直在尝试使用jquery可排序为我的龙与地下城会话制作一个带有棋子（类似国际象棋）的简单网格系统。我正在使用 Laravel 和 Blade 来完成一个小项目。这不会...

将元素移动到特定坐标

我一直在尝试使用jquery可排序为我的龙与地下城会话制作一个带有棋子（类似国际象棋）的简单网格系统。我正在使用 Laravel 和 Blade 来完成一个小项目。这不会...

symfony 6 可排序行与 sortable.js

在我看来我有 ... 在我看来我有 <table class="table table-striped bg-white table-sm"> <thead> <tr> <th scope="col">Název</th> <th scope="col">Text</th> <th scope="col">Pořadí</th> <th scope="col">Smazat</th> </tr> </thead> <tbody class="list-group" id="listWithHandle"> {% for userSample in samples %} <tr class="list-group-item"> <td> <span class="glyphicon glyphicon-move" aria-hidden="true"></span></td> Drag me by the handle <td class="pe-5">{{ userSample.sample.name }}</td> <td class="pe-5">{{ userSample.sample.text }}</td> <td class="pe-5">{{ userSample.position}}</td> <td class="pe-5"><td><a href="{{ path('delete_user_template', {id: userSample.id}) }}"><i class="fa fa-trash"></i></a></td> </tr> {% endfor %} </tbody> </table> 我尝试表中的行可以通过拖放来重新排序。我发现 javascipt 库 Sotrable.js 看起来非常好https://github.com/SortableJS/Sortable。在 symfony 中，我使用 webpack encore，我通过 napm 安装可排序，在我的 app.js 中我有一行 import Sortable from 'sortablejs'; 但是编译后在控制台中我看到错误 未定义可排序 看来我有块 <script> // Simple list Sortable.create(simpleList, { /* options */ }); // List with handle Sortable.create(listWithHandle, { handle: '.glyphicon-move', animation: 150 }); 但是可排序不是功能 您需要将 Sortable 变量放在全局范围内以便稍后访问它： 在您的入口点（app.js）中您可以执行以下操作： import Sortable from 'sortablejs'; window.Sortable = Sortable 然后您将能够在内联脚本中访问它 纳泽夫

可排序js在移动浏览器中不起作用

下面是可排序的jquery代码，它在dasktop中工作正常，但在移动浏览器中不起作用，所以请建议如何解决...？ $(文档).ready(函数() { $("#post_list&q...