将一个对象从一个 ng-repeat 拖放到另一个 ng-repeat

Question

我正在制作 trello 类型的应用程序，具有编辑、删除、添加等功能，但我无法将对象从一个 ng-repeat 拖放到另一个，请不要标记重复，我是 Angular JS 的新手，我是能够拖动它但无法在我的数组中更新它

超文本标记语言

<div class="header">

    <button type="button" ng-click="openTaskDialog()" class="btn btn-primary">ADD/EDIT TASK</button>

</div>

<div class="taskProgressHeader">

    <div class="tasksProgress">

        <div class="taskHeading">

            <h1>PENDING</h1>

        </div>

        <div class="pending" draggable="true" ng-repeat="taskNo in pending">

            <h6>{{taskNo.taskTitle}}</h6>

            <h6>{{taskNo.description}}</h6>

            <h6>{{taskNo.process}}</h6>

            <img class="taskEdit" ng-click="openTaskDialog($index,'pending')" ng-src="images/edit.png">

            <img class="taskEdit" ng-click="deleteTask($index,'pending')" ng-src="images/delete.png">

        </div>

    </div>

    <div class="tasksProgress">

        <div class="taskHeading">

            <h1>IN PROCESS</h1>

        </div>

        <div class="inProcess" droppable="true" ng-repeat="taskNo in inProcess">

            <h6>{{taskNo.taskTitle}}</h6>

            <h6>{{taskNo.description}}</h6>

            <h6>{{taskNo.process}}</h6>

            <img class="taskEdit" ng-click="openTaskDialog($index,'inProcess')" ng-src="images/edit.png">

            <img class="taskEdit" ng-click="deleteTask($index,'inProcess')" ng-src="images/delete.png">

        </div>

    </div>

    <div class="tasksProgress">

        <div class="taskHeading">

            <h1>COMPLETED</h1>

        </div>

        <div class="completed" ng-repeat="taskNo in completed">

            <h6>{{taskNo.taskTitle}}</h6>

            <h6>{{taskNo.description}}</h6>

            <h6>{{taskNo.process}}</h6>

        </div>

    </div>

</div>

我想将对象从挂起数组拖动到 inProcess 数组，将 inProcess 数组拖到 Completed 数组，当我将对象从挂起数组拖动并移动到 inProcess 数组时，拖动的对象应该从挂起数组中删除并推送到 inProcess 数组，依此类推数组到完整数组

Answer 1

您需要附加指令或函数才能在删除后获取数据。请检查这个例子。超文本标记语言<div id="div1" drop-on-me>&nbsp; <img src="https://www.w3schools.com/html/img_w3slogo.gif" drag-me&nbsp; id="drag1" width="88" height="31"></div><div id="div2" drop-on-me></div>JSangular&nbsp; .module('myApp', []);angular&nbsp; .module('myApp')&nbsp; .directive('dragMe', dragMe)&nbsp; .directive('dropOnMe', dropOnMe);dragMe.$inject = [];function dragMe() {&nbsp; var DDO = {&nbsp; &nbsp; restrict: 'A',&nbsp; &nbsp; link: function(scope, element, attrs) {&nbsp; &nbsp; &nbsp; element.prop('draggable', true);&nbsp; &nbsp; &nbsp; element.on('dragstart', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; event.dataTransfer.setData('text', event.target.id)&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; };&nbsp; return DDO;}dropOnMe.$inject = [];function dropOnMe() {&nbsp; var DDO = {&nbsp; &nbsp; restrict: 'A',&nbsp; &nbsp; link: function(scope, element, attrs) {&nbsp; &nbsp; &nbsp; element.on('dragover', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; element.on('drop', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; var data = event.dataTransfer.getData("text");&nbsp; &nbsp; &nbsp; &nbsp; event.target.appendChild(document.getElementById(data));&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; };&nbsp; return DDO;}CSS#div1,#div2 {&nbsp; float: left;&nbsp; width: 100px;&nbsp; height: 35px;&nbsp; margin: 10px;&nbsp; padding: 10px;&nbsp; border: 1px solid black;}