5

免责声明 - 我不完全确定这是可能的。但在这种情况下，我仍然希望有人指出一种可能的替代方案或某种黑客行为。

这是情况。

我有一个使用 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左右。

4

3 回答 3

1

这个怎么样：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('');
    }
});​
于 2012-06-11T16:27:58.190 回答
0

试试这个

​$('input').on('blur', function(){
   var $el = $(this),
   pos = $el.val(),
   $parent = $el.closest('li');

   $parent.insertBefore($('li').eq(pos));

})​​​

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

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

于 2012-06-11T16:12:28.340 回答
0

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
于 2012-06-11T16:24:03.233 回答