Dragging Lists

Meanbase provides an ability to drag and sort lists, this includes the ability to drag list items to the trash. This is done in a couple steps.

First let's take our list of items

<div class="mb-draggable-ghost">
  <div class="col-sm-4" ng-repeat="point in listItem.data.items">
      <div mb-edit ng-model="point.title" single="true"></div>
  </div>
</div>

and add some markup to it.

ng-sortable="mbSortableExtensionList"

ng-class="{'mb-inner-draggable': $root.editMode}"

class="mb-inner-draggable-ghost"

<div class="mb-draggable-ghost" ng-sortable="mbSortableExtensionList">
  <div class="col-sm-4 mb-inner-draggable-ghost" ng-repeat="point in listItem.data.items" ng-class="{'mb-inner-draggable': $root.editMode}">
      <div mb-edit ng-model="point.title" single="true"></div>
  </div>
</div>

The ng-sortable must be on the container that wraps the ng-repeat and makes our list sortable.

However items can't be dragged unless they have the mb-inner-draggable class. However we only want dragging to work in editMode so we use

ng-class="{'mb-inner-draggable': $root.editMode}"

To only make it draggable in edit mode.

The last step is optional. When you drag, a faded image of what you're dragging follows the cursor. You can choose what content it previewed as dragging by adding a ghost class.

This is also why we added mb-draggable-ghost to our first template because the outer add-ons list is also draggable and could use a ghost class to show what content is dragging. If you have an inner list inside your add-on, I recommend always adding the mb-draggable-ghost to your outmost element.