我正在制作 trello 類型的應(yīng)用程序，具有編輯、刪除、添加等功能，但我無法將對象從一個(gè) ng-repeat 拖放到另一個(gè)，請不要標(biāo)記重復(fù)，我是 Angular JS 的新手，我是能夠拖動(dòng)它但無法在我的數(shù)組中更新它超文本標(biāo)記語言<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>我想將對象從掛起數(shù)組拖動(dòng)到 inProcess 數(shù)組，將 inProcess 數(shù)組拖到 Completed 數(shù)組，當(dāng)我將對象從掛起數(shù)組拖動(dòng)并移動(dòng)到 inProcess 數(shù)組時(shí)，拖動(dòng)的對象應(yīng)該從掛起數(shù)組中刪除并推送到 inProcess 數(shù)組，依此類推數(shù)組到完整數(shù)組
1 回答
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
您需要附加指令或函數(shù)才能在刪除后獲取數(shù)據(jù)。請檢查這個(gè)例子。
超文本標(biāo)記語言
<div id="div1" drop-on-me>
<img src="https://www.w3schools.com/html/img_w3slogo.gif" drag-me id="drag1" width="88" height="31">
</div>
<div id="div2" drop-on-me></div>
JS
angular
.module('myApp', []);
angular
.module('myApp')
.directive('dragMe', dragMe)
.directive('dropOnMe', dropOnMe);
dragMe.$inject = [];
function dragMe() {
var DDO = {
restrict: 'A',
link: function(scope, element, attrs) {
element.prop('draggable', true);
element.on('dragstart', function(event) {
event.dataTransfer.setData('text', event.target.id)
});
}
};
return DDO;
}
dropOnMe.$inject = [];
function dropOnMe() {
var DDO = {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('dragover', function(event) {
event.preventDefault();
});
element.on('drop', function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
});
}
};
return DDO;
}
CSS
#div1,
#div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
- 1 回答
- 0 關(guān)注
- 161 瀏覽
添加回答
舉報(bào)
0/150
提交
取消