jQuery 可排序 - 根据输入字段的值排序
jQuery sortable - sort based on value of input field
>免责声明 - 我不完全确定这是否可能。但在这种情况下,我仍然希望有人指出可能的替代方案或某种黑客。
情况是这样的。
我有一个使用 jQuery UI 可排序的工作列表,因此用户可以将项目拖放到列表中。
jQuery:
$(document).ready(function() {
$("#test-list").sortable({
handle : '.big-handle',
update : function () {
var order = $('#test-list').sortable('serialize');
$("#info").load("../sortable/process-sortable.php?"+order);
}
});
});
Ajax 部分将新订单存储在数据库中,您无需担心。
该 HTML:
<ul id="test-list">
<li id='listItem_1'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li>
<li id='listItem_2'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li>
<li id='listItem_3'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li>
</ul>
这一切都很好。现在,棘手的部分。我的客户想要每个列表项旁边的输入字段,用户可以在其中输入一个数字,这应该onBlur
将该列表项移动到指定位置。因此,如果用户在列表项 3 旁边的字段中输入"1",则该项应移动到列表的第一个位置,就像将其拖到那里一样。这能做到吗?
您无需为整个列表提出完整的解决方案,假设我只需要一个可以移动第 3 项的字段。
这个怎么样:jsFiddle 示例。
$("#test-list").sortable({
handle: '.big-handle',
update: function() {
var order = $('#test-list').sortable('serialize');
$("#info").load("../sortable/process-sortable.php?" + order);
}
});
$("#test-list input").blur(function() {
var pos = $(this).val() - 1;
if (pos >= 0 && pos <= $("#test-list li").length - 1) {
if ($(this).parents('li').index() > pos) {
//move up
$(this).parents('li').insertBefore($("#test-list li:eq(" + pos + ")"));
}
if ($(this).parents('li').index() < pos) {
//move down
$(this).parents('li').insertAfter($("#test-list li:eq(" + pos + ")"));
}
$("#test-list input").val('');
}
});
试试这个
$('input').on('blur', function(){
var $el = $(this),
pos = $el.val(),
$parent = $el.closest('li');
$parent.insertBefore($('li').eq(pos));
})
功能演示:http://jsfiddle.net/YyvjH/
模拟拖动的过渡效果可以在 CSS3 中完成。
eq(2) 方法得到第 n 个匹配元素,我们将其删除。 在这种情况下,从位置 3(索引 2),因为这是您要求移动的位置。 我们将其从 DOM 中删除然后将其插入输入框中指定的位置。
//do this on blur
var index = parseInt($("input").val())
, element = $("#test-list li").eq(2).remove();
$("#test-list li").eq(index - 1).before(element); // -1 because users like 1 based indices
相关文章:
- 高级自定义字段按单选按钮值排序
- 如何指定我按哪个字段排序
- 按字段值作为参数对数组中的对象进行排序
- 如何通过三个不同的字段对javascript数组进行排序
- Mongoose,按填充字段对查询进行排序
- 使用ramda.js中的嵌套字段进行排序
- 我需要使用mongodb本机驱动程序来查找按时间戳字段排序的不同id
- 如何在JavaScript中对具有多个字段值的对象数组进行排序
- 如何在客户端通过多个字段对java对象进行排序
- 当字段的值可以为空时对 javascript 数组进行排序
- 在 JavaScript 或 PHP 中按计算字段对数组进行排序
- 如何在 select2() 字段中保存排序顺序
- 使用猫鼬.js嵌套数组中的字段排序
- Javascript UK 使用三个输入字段进行排序代码验证
- 使用 ajax 拖放功能对列字段重新排序?PHP/jQuery.
- jQuery 可排序 - 根据输入字段的值排序
- 选择下拉列表时,按角度中的多个字段排序
- 如何按字段转换器对 xPage 多行编辑框进行排序
- MongoDB中的日期字段类型(并对其进行排序)
- 排序字段的正则表达式