Angular ui-sortable + angular-gridster

Question

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!

d.h. · Accepted Answer · 2016-06-08 13:04:23Z

I accomplished what you want by 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 elements weren't sortable I just used them like so:

<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 keep track of the dragged state and the gridster element creation:

$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 the ng-click because I wanted my items to be populated to gridster on a simple click and also on drag/drop.

Also to get this working you need to add the following to your css:

.gridster>ul {
  height: 100%;
}

DEMO: http://jsfiddle.net/n7z3cykz/

Hope this gets you started.

Collectives™ on Stack Overflow

Angular ui-sortable + angular-gridster

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related