JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="my-app">
    <div ng-controller="MainController">
         <h3>Match the following</h3>

        <div class="container">
            <header>
                 <h1>Drag and drop a city into the corresponding Country box</h1>

            </header>
            <section>
                <div draggable="true" ng-repeat="qs in questions" index="{{$index}}">{{qs.city}}</div>
            </section>
        </div>
        <div class="container" ng-repeat="qs in questions">
            <header>
                 <h1>{{qs.country}}</h1>

            </header>
            <section droppable="true" index="{{$index}}"> <span>{{droppedCity}}</span> 
            </section>
        </div>
        <div class="default"> <pre>{{items|json}}</pre>
        </div>
    </div>
</body>

CSS

.container {
    width: 100%;
    border: 1px solid #CCC;
    box-shadow: 0 1px 5px #CCC;
    border-radius: 5px;
    font-family: verdana;
    margin: 25px auto;
}
.left {
    float: left;
}
.right {
    float : right;
}
.container header {
    background: #f1f1f1;
    background-image: -webkit-linear-gradient(top, #f1f1f1, #CCC);
    background-image: -ms-linear-gradient(top, #f1f1f1, #CCC);
    background-image: -moz-linear-gradient(top, #f1f1f1, #CCC);
    background-image: -o-linear-gradient(top, #f1f1f1, #CCC);
    box-shadow: 0 1px 2px #888;
    padding: 10px;
}
.container h1 {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 2px white;
    color: #888;
    text-align: center;
}
.container section {
    padding: 10px 30px;
    font-size: 12px;
    line-height: 300%;
    color: #333;
}
.default {
    clear : both;
}

JavaScript

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

module.directive('draggable', function () {
    return {
        restrict: 'A',
        scope: {
            index: '@'
        },
        
        link: function (scope, element, attrs) {
            element[0].addEventListener('dragstart', scope.handleDragStart, false);
            element[0].addEventListener('dragend', scope.handleDragEnd, false);
        },
        controller: function($scope) {
            
            $scope.handleDragStart = function (e) {
                console.log('starting drag', $scope.index);
                this.style.opacity = '0.9';
                e.dataTransfer.setData('text/plain', this.innerHTML);
            };

            $scope.handleDragEnd = function (e) {
                this.style.opacity = '1.0';
            };
        }
    };
});

module.directive('droppable', function () {
    return {
        restrict: 'A',
         scope: {
            index: '@'
        },
        link: function (scope, element, attrs) {
            element[0].addEventListener('drop', scope.handleDrop, false);
            element[0].addEventListener('dragover', scope.handleDragOver, false);
        },
        controller: function($scope) {
            $scope.handleDrop = function (e) {
                e.preventDefault();
                e.stopPropagation();
                var dataText = e.dataTransfer.getData('text/plain');
                $scope.$parent.answers.push({country: $scope.$parent.questions[$scope.index].country});
                $scope.$parent.answers.push({city: $scope.$parent.questions[$scope.index].city});
                
                console.log(dataText, $scope.$parent.answers[$scope.index]);
            };
            
            $scope.handleDragOver = function (e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                console.log('dragging over', $scope.$parent.questions[$scope.index].country);
                return false;
 ...