Dragula angular 如何访问模型项目

Question

如何访问使用 drop-model 事件拖放的确切模型项？

文档中对放置事件的描述：

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

el 似乎 return 被拖动的 HTML 元素，但我需要对其背后的实际数据项执行操作。有什么提示吗？

 <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);
});

Answer 1

我遇到了同样的问题，通过将项目的 id 添加到 HTML 元素中解决了这个问题。

像这样：

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

在控制器中，我使用 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);
});

Dragula angular 如何访问模型项目

Dragula angular how to access the model item

angularjs

dragula

angular-dragula