Tag: jquery ui sortable

动态启用/禁用jquery可排序项

我有可以排序的表行,具体取决于是否检查某些单选按钮。 sortables在document.ready上初始化如下: $(document).ready(function() { // Return a helper with preserved width of cells // handy code I got from http://lanitdev.wordpress.com/2009/07/23/make-table-rows-sortable-using-jquery-ui-sortable/ var fixHelper = function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; }; // #opts = table id; tr.ui-state-disabled class = rows not sortable $(“#opts tbody”).sortable({ items: ‘tr:not(.ui-state-disabled)’, cursor: ‘crosshair’, helper: fixHelper }).disableSelection(); }); 我在onchange上的单选按钮(带有前缀“active_”)的单元格上附加了以下函数,它可以从表行添加或删除ui-state-disabled类属性(动态ID为前缀“opt_”): […]

jQuery sorttable在updatepanel(JavaScript)中回发后不起作用

我有一个jQuery的可排序函数的问题。 当我的页面使用更新面板进行回发时,动态表的排序不再起作用。 按下图像按钮时会触发回发。 按下图像按钮时,会有一个新行,其中包含子表。 我尝试了这3个JavaScript代码,但它们似乎只是第一次工作。 打开子表后,它们不起作用。 你们可能知道一个JavaScript解决方案来解决这个问题吗? 我的第一次尝试: $(function(){ $(‘table[id*=”tbl_main”]’).tablesorter(); }); 我的第二次尝试: $(document).ready(function(){ $(‘table[id*=”tbl_main”]’).tablesorter(); }); 我的第三次尝试: function pageLoad() { $(function () { $(“#pager”).unbind(); $(‘table[id*=”tbl_main”]’) .tablesorter() .tablesorterPager({ container: $(“#pager”) }); } )}

jQuery:draggable connect to sortable。 draggable项具有与可排序列表不同的DOM

我现在能够将项目拖动到可排序的项目。 但是可排序列表具有不同的DOM。 DRAG THIS A DRAG THIS B This is a new DOM dragged from “DRAG THIS A” This is a new DOM dragged from “DRAG THIS B” $(document).ready(function() { $(‘.draggable_text > li’).draggable({ //helper:’clone’, helper: function(event, ui) { return ‘xxx’; }, connectToSortable:’#stagerows’ }); $(‘#stagerows’).sortable({ handle: ‘.drag_handle’ }); }); 助手有这个:xxx这应该放入可排序的…… “助手”有效。 但是当我将项目“删除”到可排序项中时,它只会恢复为“原始”DOM。 我希望将“新创建的DOM”(在帮助程序中创建的DOM)放入可排序的中。 我希望我有意义。 谢谢! 另一种说法是:当我拖动一个苹果时,它现在变成了橙色。 […]

在jQuery中对多个选定项进行排序?

我正在尝试在jQuery可排序集中选择多个项目,然后将所选项目一起移动 。 这是我试图让它发挥作用的薄弱开端 。 这是代码: HTML: one two three four five JS: $(‘.container div’).draggable({ connectToSortable: ‘.container’, //How do I drag all selected items? helper: function(e, ui) { return $(‘.selected’); } }); $(‘.container’).sortable({ axis: ‘y’, //How do I sort all selected items? helper: function(e, ui) { return $(‘.selected’); } }); $(‘.container div’).live(‘click’, function(e) { $(this).toggleClass(‘selected’); }); […]

JQuery可排序和自动滚动

我试图让JQuery Sortable工作,但我遇到了轻微的可用性问题。 我尝试排序的列表非常大(约200项)。 如果用户尝试将顶部项目向右拖动到底部,则一旦项目到达屏幕可见部分的底部,页面将滚动一小部分,然后停止。 要触发更多向下滚动,您必须以圆周运动移动鼠标,直到项目到达底部。 是否有任何方法可以在拖动项目并自动向下滚动屏幕时跟踪鼠标的位置?

jQuery ui可排序的表格刷新数字位置

在一个html表中,我在每一行都有一个具有自己位置编号的单元格。 在使用jQueryUI进行排序后,如何正确刷新此位置编号? 这是我的简单html: Position number Name 1 Text 2 Text 这是我的js: var fixHelper = function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; }; $(“table tbody”).sortable({ helper: fixHelper }).disableSelection(); 现在我想在完成排序后更改订单正确的位置编号值。 我该怎么做? 任何帮助,将不胜感激。

jQuery可排序的项目高度

我有一个基于列表的简单jQuery可排序,如下所示: Item 1 Item 2 Item 3 Item 4 我已经创建了一个辅助函数,因此无论项目的内容是什么,帮助程序始终是相同的固定大小。 我的问题是,如果我拖动一个内容很多的项目(说几段文字),即使我的帮手只有一行高度,项目也不会掉到下面的项目上,直到它至少走过我的项目的原始高度。 例如: Item 1 line2 line3 line4 line5 Item 2 Item 3 Item 4 如果我拖动item1,我的帮助器将其转换为单行 – 很好且易于拖动。 但是,我仍然需要在屏幕上向下移动5行,然后才能在item2和item3之间删除item1。 一旦我拖动足够的高度,项目似乎按照我的预期运行,我不再需要将其拖动到原始高度。 我已经尝试了所有可以考虑的可选择的选项,但没有用,我希望有人有一个建议。 $( ‘#sortable’ ).sortable( { placeholder: ‘highlight’, axis: ‘y’, helper: function( event ) { return $( this ).find( ‘.drag’ ).clone(); }, });

具有“滑动效果”的jquery可排序插件?

jQueryUI有一个很好的插件,可排序: http : //jqueryui.com/demos/sortable/我对这个插件非常满意,但我只缺少一件事。 而不是让改变位置的元素弹出/跳转到新位置,我希望它们“滑动”到新的位置。 换句话说,让它更平滑一点。 我已经在’网上搜索了三天了,并没有找到一个插件(!?!??)。 我的意思是来吧,必须有一个,对吗? 我也尝试过自己修改一下代码,然后让它工作(通过克隆元素,将克隆滑动到新位置,然后删除克隆。同时我隐藏了原始元素删除克隆后取消隐藏)。 但它不能很好地工作,我认为那里肯定有更好的一个! 所以我真的在寻求帮助。 请修改帮助,或者如果您看过这样做的插件,请(:

jQuery UI可拖动/可排序 – 动态添加的项目不可拖动

我有一个可拖动/可排序的列表,我正在动态添加项目,但问题是,一旦添加了项目,就无法将它们移动到新列表。 你可以在这里看到这些function: http : //jsfiddle.net/Y4T32/2/ 将项目从可用列表拖动到其中一个目标列表,您将看到我的意思。 现在添加一个“标注”并尝试将新项目拖动到其中一个目标列。 我在这里找到了另一个按照我的意愿工作的答案,但是无法重现他们得到的结果(当然,现在找不到答案)。 有什么洞察我在这里做错了什么?

没有jQuery UI的jQuery Sortable

我需要“可排序的拖放”function,我正在使用jQuery。 我真的不能使用jQuery UI,因为对于这个项目来说,这将是一个开销(我需要添加许多KB的JS和CSS才能使用一小部分function)。 有没有你可以推荐的插件,或者是一个简单的实现路径,我可以遵循? 解决方案必须尽可能轻量级,最好基于jQuery / Sizzle或纯JavaScript。