Limiting the drag area in angular drag drop list

Question

I'm using the angular drag drop list library for drag/drop of items in a list. Currently I see the item is draggable throughout the body of the page. How can I limit the drag area to only to a particular zone and not everywhere. I checked their API but I don't see any option for that.

Answer 1

In the plunker example you cannot drag and drop every where, only on html element with dnd-draggable

<ul dnd-list="list">
    <!-- The dnd-draggable directive makes an element draggable and will
         transfer the object that was assigned to it. If an element was
         dragged away, you have to remove it from the original list
         yourself using the dnd-moved attribute -->
    <li ng-repeat="item in list"
        dnd-draggable="item"
        dnd-moved="list.splice($index, 1)"
        dnd-effect-allowed="move"
        dnd-selected="models.selected = item"
        ng-class="{'selected': models.selected === item}"
        >
        {{item.label}}
    </li>
</ul>