Question

我正在使用一些具有编辑，删除，添加等功能的trello类应用程序，但是我无法将对象从一个ng-repeat拖放到另一个，请不要将其标记为重复，我是angular js的新手，我可以拖动它，但不能在数组中更新它

HTML

const onChange = async(event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
    await AsyncStorage.setItem('Date', selectedDate); // the problem is here, I believe
};

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数组，将inProcess数组拖动到Completed数组，拖动的对象应从挂起的数组中移出并推入inProcess数组，因此将inProcess数组设置为完整数组

Answer 1

您需要附加指令或函数才能删除数据。请检查此示例。

HTML

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

将对象从一个ng重复拖放到另一个ng重复

1 个答案: