使用packery拖放和jqueryui在angularjs上表现不正常答案

【问题标题】：drag and drop using packery and jqueryui didn't behave properly on angularjs使用packery拖放和jqueryui在angularjs上表现不正常
【发布时间】：2014-12-29 10:55:42
【问题描述】：

这是这个问题的后续问题

document.getElementById returns null after create new packery using angularjs

所以基本上我使用jqueryui Draggable添加了一些在packery jquery插件上拖放的功能，并且我还包括在packery元素中添加、拖动和删除项目的功能

这是添加功能

app.controller('test', function($scope) {

  $scope.addItem = function() { //this is the adding new list functionality
    $scope.items.push({
      title: 'Item',
      text: 'Lorem Ipsum dolor sit amet'
    });
  }

});

这是拖放功能

app.directive('packeryItem', function() {
  return {
    restrict: "C",
    scope: false,
    require: '^packery',
    link: function(scope, elem, attr, packeryCtrl) {

      elem.draggable({
        containment:"parent",
        stack:".packery-item"
      });

      packeryCtrl.container.packery('bindUIDraggableEvents', elem);

    }
  }
});

现在一切正常，功能正常，动画和过渡都正常，当我实现删除列表功能时出现问题..

这是删除列表功能

app.controller('test', function($scope) {

  $scope.removeItem = function(item) { //delete list functinoality by using splice function 
    $scope.items.splice($scope.items.indexOf(item), 1);
  }

});

从拼接列表功能中，它广播了 $destroy 函数，所以我用它来重新布局打包插件

app.directive('packeryItem', function() {
  return {
    restrict: "C",
    scope: false,
    require: '^packery',
    link: function(scope, elem, attr, packeryCtrl) {

      scope.$on('$destroy', function() { //this is the relayouting functionality
        packeryCtrl.container.packery(packeryCtrl.packeryConfig);
      });

    }
  }
});

有趣的部分是，现在拖放不能正常工作，每次我拖动项目并悬停另一个项目时，它并没有按照应有的方式重新布局。它只是覆盖了列表中的另一个项目，我不知道为什么......

有人愿意详细说明吗？这是工作plunkr

【问题讨论】：

标签： javascript jquery angularjs jquery-ui drag-and-drop

【解决方案1】：

我使用自己的逻辑创建了一种解决方法来解决此问题，首先使用打包功能删除 DOM，然后从 $scope.items 拼接数组

这是删除功能

scope.remove = function(item) {
                        packeryCtrl.container.packery('remove', elm);
                        scope.items.splice(scope.items.indexOf(item), 1);
                    }

这是工作的plunkr

【讨论】：