angularjsdragulaangular-dragula

Dragula angular how to access the model item


How do I access the exact model item that was dragged and dropped using the drop-model event?

Description of the drop event from the docs:

el was dropped into target before a sibling element, and originally came from source

el seems to return the HTML element that was dragged but I need to perform actions on the actual data item behind it. Any hints?

 <div class="collapse" id="manageUsers">
    <div class='containerDragula' dragula='"bag"' dragula-model='usersInProject'>
        <div ng-repeat='user in usersInProject' ng-bind='user.email'></div>
    </div>
    <div class='containerDragula' dragula='"bag"' dragula-model='usersNotInProject'>
        <div ng-repeat='user in usersNotInProject' ng-bind='user.email'></div>
    </div>
</div>

$scope.$on('bag.drop-model', function (e, el, target, source) {
    //this returns the html element
    console.log(el);
});

Solution

  • I had the same problem and solved it by adding the id of the item to the HTML element.

    Something like this:

    <div id="{{ user.id }}" ng-repeat='user in usersNotInProject' ng-bind='user.email'></div>
    

    In the controller I look up the item using the id:

    $scope.$on('bag.drop-model', function (e, el, target, source) {
        //getById is a function you implement (unless you already have it)
        console.log(usersNotInProject.getById(el.attr('id')).email);
    });