html - 如何允许根据angularjs中的名称放入框

Question

我在 angular js 中有一个拖放，可以在单元格之间以两种方式拖动。

我需要以这样一种方式转换它，即 带有 a 的成员，即 1a、2a 等 可以拖放到最后一个列表和 b 的成员，即 2a,2b atc 可以拖放到 secondlast list

即 secondlast 和 lastbox 应该接受 drop 并根据字母 a 和 b 过滤 drop

如何实现？

var app = angular.module('dragDrop', []);

// Create a simple data model
var dataModel = {
  'reds': [{'id': 'red1','text': 'member 1a'}, 
		   {'id': 'red2','text': 'member 1b'},{'id': 'red3','text': 'member 1b'}],
'greens': [{'id': 'green1','text': 'member 2a'}, 
           {'id': 'green2','text': 'member 2b'}]
                }

  app.controller('DragDropCtrl', function($scope) {
  $scope.data = dataModel;

  $scope.MoveItem = function(origin, dest, item_id) {
    // Check if dropped in origin
    if (origin == dest) return;

    // Find item in origin array
    for (i = 0; i < $scope.data[origin].length; i++) {
      if ($scope.data[origin][i].id == item_id) {
        // Splice the item from the origin array
        var item = $scope.data[origin].splice(i, 1);
        // Push to the destination array
        $scope.data[dest].push(item[0]);
        // End loop
        break;
      }
    }
    
    // Update UI
    $scope.$apply();
  }
});


app.directive('draggable', function() 
{
  return function(scope, element, attrs) 
  {
    // Get the native element
    var el = element[0];
    el.draggable = true; // Make dragable

    // Add event listeners
    el.addEventListener(
      'dragstart',
      function(e) {
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('item_id', this.id);
        e.dataTransfer.setData('origin_id', el.parentElement.id);
        this.classList.add('dragging');
        return false;
      }, false
    );

    el.addEventListener(
      'dragend',
      function(e) {
        this.classList.remove('dragging');
        return false;
      },
      false
    );
  }
});

app.directive('droppable', function() {
  return function(scope, element, attrs) {
    // Get the native element
    var el = element[0];

    // Add event listeners
    el.addEventListener(
      'dragover',
      function(e) {
        e.preventDefault(); // Allow the drop

        // Set effects
        e.dataTransfer.dropEffect = 'move';
        this.classList.add('dragover');
        return false;
      }, false
    );

    el.addEventListener(
      'dragenter',
      function(e) {
        this.classList.add('dragover');
        return false;
      }, false
    );

    el.addEventListener(
      'dragleave',
      function(e) {
        this.classList.remove('dragover');
        return false;
      }, false
    );

    el.addEventListener(
      'drop',
      function(e) {
        this.classList.remove('dragover');

        // Get the data
        var destination = this.id;
        var item_to_move = e.dataTransfer.getData('item_id');
        var origin = e.dataTransfer.getData('origin_id');

        // Call the scope move function
        scope.MoveItem(origin, destination, item_to_move);

        return false;
      }, false
    );
  }
});

.list {
  float: left;
  margin-left: 5px;
  width: 100px;
  height: 200px;
}

.red {
  border: 1px solid red;
}

.green {
  border: 1px solid green;
}

.blue {
  border: 1px solid blue;
}

.item {
  width: 98px;
  border: 1px solid;
}

.red .item {
  background-color: red;
}

.green .item {
  background-color: green;
}

.blue .item {
  background-color: green;
}

.dragover,
.dragging {
  border: 2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="dragDrop" ng-controller="DragDropCtrl">
  <div id="reds" class="list red" droppable>
    <div class="item" id="{{ item.id }}" ng-repeat="item in data.reds" draggable>
      {{ item.text }}
    </div>
  </div>
  <div id="greens" class="list green" droppable>
    <div class="item" id="{{ item.id }}" ng-repeat="item in data.greens" draggable>
      {{ item.text }}
    </div>
  </div>
  <div id="greens" class="list green" droppable>
    <div class="item" id="{{ item.id }}" ng-repeat="item in data.greens" draggable>
      {{ item.text }}
    </div>
  </div>
  <div id="greens" class="list green" droppable>
    <div class="item" id="{{ item.id }}" ng-repeat="item in data.greens" draggable>
      {{ item.text }}
    </div>
  </div>
  
  
</div>

Answer 1

本文档应该可以帮助您了解拖放行为和设置有效的放置目标

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dropfeedback