I'm trying to combine the functionality of ui-sortable and angular-gridster so that I can pull an item from a list and drop it into a rearrangeable grid. ui-sortable and angular-gridster have the same DOM structure:
<div>
<ul>
<li ng-repeat="item in items"></li>
</ul>
</div>
and attributes allow them to attach to the appropriate DOM elements. I thought this would be a pretty straight forward task, however I'm unable to get them to work together.
I've created this CodePen where you can drag from the ui-sortable "Ingredents" list into the "My Coffee" list. Dragging into "My Coffee" also updates the angular-gridster "Coffee Grid", since "My Coffee" and "Coffee Grid" are using the same model. What I'd like to do is drag directly from "Ingredients" into "Coffee Grid".
The main difference I'm seeing is that after setting up, Gridster's DOM looks like this:
<div gridster>
**<div ng-transclude>**
<ul>
<li></li>
</ul>
</div>
</div>
And ui-sortable's looks like this:
<div ui-sortable>
<ul>
<li></li>
</ul>
</div>
So angular-gridster is adding a <div ng-trasclude>, making me think that ui-sortable might be having trouble attaching to the DOM elements since that unexpected div is there.
I also stepped through the ui-sortable source locally and have determined that its update method is never called. A successful drag/drop will call the following methods:
start
activate x2
update
remove
receive
update
stop
where as trying to drag into angular-gridster looks like this:
start
activate x3
stop
However, I wasn't able to determine why update was never called and no errors are thrown.
I realize this is a very specific question and am hoping someone may have run across the same problem or would be willing to help me do some debugging. Thanks in advance!
