jQuery sortable - 基于输入字段的值排序

Question

免责声明 - 我不完全确定这是可能的.但在那种情况下,我仍然希望有人指出可能的替代方案或某种类型的黑客.

这是情况.

我有一个使用jQuery UI Sortable的工作列表,因此用户可以拖放列表中的项目.

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将该列表项移动到指定位置.因此,如果用户在列表项目号旁边的字段中输入"1".3,然后该项应该移动到列表中的第一个点,就像它被拖动到那里一样.可以这样做吗？

你不需要为整个列表提出完整的解决方案,让我们说我只需要一个可以移动项目号的字段.3左右.

Answer 1

尝试这个

\n\n

\xe2\x80\x8b$(\'input\').on(\'blur\', function(){\n   var $el = $(this),\n   pos = $el.val(),\n   $parent = $el.closest(\'li\');\n\n   $parent.insertBefore($(\'li\').eq(pos));\n\n})\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\n

\n\n

功能演示：http://jsfiddle.net/YyvjH/

\n\n

模拟拖动的过渡效果可以在 CSS3 中完成。

\n