javascript - 具有可拖动 div 的 Packery 布局不遵守项目顺序

Question

我在 Angular.js 应用程序中使用 Packery & Draggabilly 创建类似仪表板的设置，用户可以在其中动态创建添加到 Packery 布局的窗口。我认为，我遇到的问题与将 Packery 和 Angular.js 正确地结合在一起有关。

总的来说，布局还可以:正确添加了 div，可以通过在 Canvas 上拖动来更改它们的顺序，也可以删除它们。问题在于，如果更改 div 顺序并将新的 div 添加到布局中，则 div 将重新定位到旧位置。例如:

1. 添加 div A、B 和 C。A 现在位于 Canvas 的最左侧。
2. 将A拖到C后面，所以新的顺序是B、C、A。
3. 添加新的 div，D。
4. 出于某种原因，div 的新顺序现在是 A、B、C、D。我期望的是 A 的拖动位置会在布局中的新 div 之后得到尊重。

Packery 指令:

win.controller('PackeryController', ['$scope', '$rootScope', '$timeout',
  function($scope, $rootScope, $timeout) {
    console.log("packery controller");
    $scope.$onRootScope('packery.add', function(event, selection, type) {
      $scope.add(selection, type);
    });

    $scope.windows = [];
    $scope.windowRunningNumber = 0;

    // remove from grid
    $scope.remove = function(number, element) {
      $scope.windows = _.reject($scope.windows, function(obj) {
        return obj.number === number;
      });
      $scope.packery.remove(element[0]);
      $scope.packery.layout();
    };

    // adds window to grid
    $scope.add = function(selection, type) {
      $scope.windows.push({
        number: (++$scope.windowRunningNumber),
        type: type,
        variables: selection
      });
    };
  }
]);
win.directive('packery', [

  function() {
    return {
      restrict: 'C',
      templateUrl: 'vis/windowing/packery.tpl.html',
      replace: true,
      controller: 'PackeryController',
      scope: {},
      link: function(scope, elm, attrs, controller) {
        scope.packery = new Packery(elm[0], {
          isResizeBound: true,
          // see https://github.com/metafizzy/packery/issues/7
          rowHeight: 410,
          itemSelector: '.window',
          gutter: '.gutter-sizer',
          columnWidth: 500
        });
      }
    };
  }
]);

Packery Canvas 上单个 div/窗口的指令:

win.directive('window', ['$compile', '$injector',
 function($compile, $injector) {
  return {
   scope: false,
   require: '^packery',
   restrict: 'C',
   templateUrl: 'vis/windowing/window.tpl.html',
   replace: true,
   link: function($scope, ele, iAttrs, controller) {
    $scope.element = ele;
    var draggable = new Draggabilly($scope.element[0], {
     handle: '.handle'
    });
    $scope.$parent.packery.bindDraggabillyEvents(draggable);

    $scope.packery.reloadItems();
    $scope.packery.layout();

    // catch dragging operations
    $scope.element.find('.handle').mousedown(function() {
     $(window).mousemove(function() {
      $scope.isDragging = true;
      $(window).unbind("mousemove");
     });
    })
     .mouseup(function() {
      var wasDragging = $scope.isDragging;
      $scope.isDragging = false;
      $(window).unbind("mousemove");
      if (!wasDragging) { //was clicking
       return;
      }
      console.log("was dragging");
      setTimeout(function() {
       $scope.packery.reloadItems();
       // $scope.packery.layout();
      }, 900);
     });

    // catch window destroys
    $scope.$on('$destroy', function() {
     $scope.packery.reloadItems();
     // $scope.packery.layout();
    });
   }
  };
 }
]);

我怀疑是

a) 我没有捕捉到所有必要的 DOM 操作(除了通过拖动添加、删除和更改顺序之外还有其他操作吗？)这会导致 Packery 实例不同步，或者

b) 这些 DOM 操作需要调用其他 Packery 方法。

有什么想法吗？我做错了什么？

Answer 1

在 Github 中的 Packery 开发人员的帮助下解决了这个问题.

参见 this Codepen要点。基本上你想避免 .reloadItems()，并且不需要在拖动事件后进行布局(而且无论如何都可以更好地处理这些事件，请参阅 Draggabilly 文档中的 Events)。