Question

我在这里创造了一个小提琴：http://jsfiddle.net/2hzd555w/1/

var canvas = $("#container");

canvas.on('click', '.element-buttons button', function(e) {
        e.preventDefault();

        var element = $(this).closest('.element');
        var element_order = element.find('input.order');

        if ($(this).hasClass("move-element-up")) {
          var prev = element.prev('.element');
          if (prev.length > 0) {
            var prev_order = prev.find('input.order');
            prev_order.val(element_order.val());
            element_order.val(parseInt(element_order.val()) - 1);
          }
        } else {
          var next = element.next('.element');
          if (next.length > 0) {
            var next_order = next.find('input.order');
            next_order.val(element_order.val());
            element_order.val(parseInt(element_order.val()) + 1);
          }
        }

        moveElements();
 });

var moveElements = function() {
    $('.element').sort(function(a, b) {
        return parseInt($(a).find('input.order').val()) - parseInt($(b).find('input.order').val());
      }).detach().appendTo(canvas);
}

因此，按下几个向上/向下按钮移动div后，您会注意到结果部分会意外滚动到顶部或该区域的另一部分。

现在这只发生在Chrome上，它可以在Firefox中运行。

任何帮助都会非常感激，我几周来一直在撞墙。

注意：您可能需要上下单击（在某些情况下为2分钟），请确保在结果窗口中向下滚动。

Answer 1

显然.detach()基本上是在清空页面，因此不需要滚动条，最后会在页面顶部。

一种常见的方法是暂时修复container的高度，以便页面高度保持不变，然后在完成detach / attach后删除它：

var moveElements = function() {

    // set height to its calculated height
    canvas.height(canvas.height());

    $('.element').sort(function(a, b) {
        return parseInt($(a).find('input.order').val()) - parseInt($(b).find('input.order').val());
      }).detach().appendTo(canvas);

    // reset the height to auto
    canvas.height('');
}

Updated Fiddle

我确定必须有一个更好的方法，或者你可以在排序过程中实际分离和附加元素，但这听起来效率低下。

Answer 2

我同意Rhumborl的说法，.detach（）导致了这种滚动异常。

另一个hacky解决方案是将焦点放在您单击的项目上：在$(this).focus();

之后放置moveElements();

Chrome会随机滚动Javascript事件

2 个答案: