Angular ui-sortable + angular-gridster
I am trying to combine the functionality of ui-sortable and angular-gridster so that I can pull an item from the list and move it to a rearranged 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 you to attach them to the corresponding DOM elements. I thought this would be a pretty simple task, however I cannot get them to work together.
I created this CodePen where you can drag from the Ingredients sorting list to the My Coffee list, Dragging and dropping to My Coffee also updates the angular-gridster's "Coffee Grid" since "My Coffee" and "Coffee Grid" use the same model. What I would like to do is drag directly from Ingredients to Coffee Grid.
The main difference I see is that after setting up the Gridster, the DOM looks like this:
<div gridster>
**<div ng-transclude>**
<ul>
<li></li>
</ul>
</div>
</div>
And the ui-sortable looks like this:
<div ui-sortable>
<ul>
<li></li>
</ul>
</div>
So angular-gridster adds <div ng-trasclude>
, making me think that ui-sortable might have problems attaching to DOM elements as this unexpected div is there.
I also stepped through the ui sorted source locally and determined that its update method was never called. A successful drag will call the following methods:
start
activate x2
update
remove
receive
update
stop
where when trying to drag in angular-gridster looks like this:
start
activate x3
stop
However, I was unable to determine why the update was never called and there were no errors.
I realize this is a very specific question, and I hope that someone might be facing the same problem or would like to help me do some debugging. Thanks in advance!
source to share
I have accomplished what you need using the following extension:
https://github.com/codef0rmer/angular-dragdrop
I added the following options to the gridster ul element:
<ul data-drop="true"
data-jqyoui-options="{hoverClass: 'widgetDropOver'}"
jqyoui-droppable="{onDrop:'widgetDropHandler'}">
<li>...</li>
</ul>
My items weren't sorted, I just used them like this:
<a ng-click="widgetClickHandler()"
data-drag="true"
data-jqyoui-options="{revert: 'invalid'}"
jqyoui-draggable="{animate:true, onDrag: 'widgetDragHandler', onStop: 'widgetDragStopHandler'}">
element
</a>
The following are the functions I used to track the state of the drag and create the grid item:
$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
}
}
I used ng-click because I wanted my objects to be filled in the gridster with a simple click as well as drag and drop.
To get this working, you need to add the following to your css:
.gridster>ul {
height: 100%;
}
DEMO: http://jsfiddle.net/n7z3cykz/
Hope this helps you.
source to share