JSFiddle - React, Tailwind, and code Playground

by Pradeepa Loganathan

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">{{qs.city}}</div>
            </section>
        </div>
        <div class="container" ng-repeat="qs in questions">
            <header>
                 <h1>{{qs.country}}</h1>

            </header>
            <section droppable="true"> <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',
        link: function (scope, element, attrs) {
            element[0].addEventListener('dragstart', scope.handleDragStart, false);
            element[0].addEventListener('dragend', scope.handleDragEnd, false);
        }
    }
});

module.directive('droppable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element[0].addEventListener('drop', scope.handleDrop, false);
            element[0].addEventListener('dragover', scope.handleDragOver, false);
        }
    }
});

module.controller("MainController", function ($scope) {
    $scope.questions = [{
        city: "Delhi",
        country: "India"
    }, {
        city: "Tokyo",
        country: "Japan"
    }, {
        city: "Doha",
        country: "Qatar"
    }, ];

    $scope.answers = [];

    $scope.handleDragStart = function (e) {
        this.style.opacity = '0.9';
        e.dataTransfer.setData('text/plain', this.innerHTML);
    };

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

    $scope.handleDrop = function (e) {
        e.preventDefault();
        e.stopPropagation();
        var dataText = e.dataTransfer.getData('text/plain');
        $scope.$apply(function () {
            $scope.answers[id].country = $scope.questions[$index].country
            $scope.answers[id].city = dataText;
        });
        console.log($scope.answers[$index]);
    };

    $scope.handleDragOver = function (e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        return false;
    };
});