angularjs - Angular ui-sortable + angular-gridster

Question

我正在尝试结合 ui-sortable 的功能和 angular-gridster这样我就可以从列表中拉出一个项目并将其放入可重新排列的网格中。 ui-sortable 和 angular-gridster 具有相同的 DOM 结构:

<div>
    <ul>
        <li ng-repeat="item in items"></li>
    </ul>
</div>

和属性允许它们附加到适当的 DOM 元素。我认为这将是一项非常简单的任务，但我无法让他们一起工作。

我创建了这个 CodePen您可以从 ui 排序的“成分”列表中将其拖到“我的咖啡”列表中。拖入“My Coffee”也会更新 Angular 网格“Coffee Grid”，因为“My Coffee”和“Coffee Grid”使用相同的模型。我想做的是直接从“成分”拖到“咖啡网格”。

我看到的主要区别是，在设置之后，Gridster 的 DOM 看起来像这样:

<div gridster>
    **<div ng-transclude>**
        <ul>
           <li></li>
        </ul>
    </div>
</div>

ui-sortable 看起来像这样:

<div ui-sortable>
    <ul>
       <li></li>
    </ul>
 </div>

所以 angular-gridster 添加了一个 <div ng-trasclude> ，让我觉得 ui-sortable 可能无法附加到 DOM 元素，因为那里有意想不到的 div。

我还在本地单步执行了 ui-sortable 源，并确定它的更新方法从未被调用。成功的拖放将调用以下方法:

start
activate x2
update
remove
receive
update
stop 

尝试拖入 angular-gridster 的地方看起来像这样:

start
activate x3
stop 

但是，我无法确定为什么从未调用更新且未抛出任何错误。

我意识到这是一个非常具体的问题，我希望有人可能遇到过同样的问题或者愿意帮助我进行一些调试。提前致谢!

Answer 1

我通过使用以下扩展完成了您想要的:

https://github.com/codef0rmer/angular-dragdrop

我向 gridster ul 元素添加了以下选项:

<ul data-drop="true"
    data-jqyoui-options="{hoverClass: 'widgetDropOver'}"
    jqyoui-droppable="{onDrop:'widgetDropHandler'}"> 
       <li>...</li>
</ul>

我的元素不可排序，我只是像这样使用它们:

<a ng-click="widgetClickHandler()"
   data-drag="true"
   data-jqyoui-options="{revert: 'invalid'}"
   jqyoui-draggable="{animate:true, onDrag: 'widgetDragHandler', onStop: 'widgetDragStopHandler'}">
   element
</a>

以下是我用来跟踪拖动状态和 gridster 元素创建的函数:

$scope.widgetDragHandler = function() {
  $scope.widgetDragged = true;
};

$scope.widgetDragStopHandler = function() {
  $scope.widgetDragged = false; 
};

$scope.widgetDropHandler = function(event, ui) {
   // we only need the drophandler to reset the widget dragged state,
   // ng-click is always fired, so we handle the widget adding there
   $scope.widgetDragged = false;
};

$scope.widgetClickHandler = function(type) {
  // only use the click handler when the user is not dragging
  if ($scope.widgetDragged === false) { 
    // create a gridster item here
    // I am using a ng-repeat to populate the gridster items
    // and so I only need to push a new item here to the list
  }
}

我使用 ng-click 是因为我希望通过简单的点击和拖放操作将我的项目填充到 gridster。

此外，为了使它正常工作，您需要将以下内容添加到您的 CSS 中:

.gridster>ul {
  height: 100%;
}

演示: http://jsfiddle.net/n7z3cykz/

希望这能让您入门。