Angularjs 角度用户界面可排序+；角格栅

我正在尝试结合和的功能，以便可以从列表中提取一个项目，并将其放入可重新排列的网格中。ui sortable和angular gridster具有相同的DOM结构：

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

其中，尝试拖动到angular gridster时如下所示：

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

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

start
activate x3
stop 

然而，我无法确定为什么从未调用更新，也没有抛出错误

---

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

我通过使用以下扩展实现了您想要的功能：

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

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

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

此外，要使此功能正常工作，您需要在css中添加以下内容：

.gridster>ul {
  height: 100%;
}

演示：

希望这能让你开始

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

$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
  }
}

.gridster>ul {
  height: 100%;
}