JSFiddle - React, Tailwind, and code Playground

by maxxdev1985

HTML

<div ng-app="myapp" ng-controller="MainController">
<a href="#" ng-click="edit(43)">Make point 43 draggable</a> 
    <ul class="court">
        <li ng-repeat="point in courtPoints" droppable data-location="{{point.location}}">{{point.location}}
            <div class="draggable-point draggable-point-location" location-point-draggable ng-show="point.marker==true"></div>
        </li>
    </ul>
</div>

CSS

ul.court {
    width:400px;
    height: 354px;
}
ul.court li {
    float:left;
    height:45px;
    width:47px;
    list-style: none;
}
ul.court li:nth-child(even) {
    margin-right:0;
}
.draggable-point {
    border-radius: 22px;
    height: 18px;
    width: 18px;
    -webkit-user-drag: element;
}
.draggable-point-location {
    background: none repeat scroll 0 0 orange;
}

JavaScript

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

myapp.directive('locationPointDraggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                containment: '.court',
                cursor: 'move',
                cancel: 'a',
                revert: 'invalid',
                snap: 'true',
                stop: function (event, ui) {}
            });

        }
    };
});

myapp.controller('MainController', ['$scope', function ($scope) {
    Array.range = function (start, end) {
        var arr = [];

        for (var i = start; i < end; i++) {
            var point = {};
            point.location = i + 1;
            point.marker = false;
            point.allowDrag = false;
            arr[i] = point;
        }
        return arr;
    };

    $scope.init = function () {
        $scope.courtPoints = Array.range(0, 50);
        $scope.courtPoints[42].marker = true; //42 because start from zero
    };

    $scope.edit = function (id) {
        $scope.courtPoints[42].allowDrag = true;
        $scope.courtPoints[42].location = '2014';
    };

    $scope.init();
}]);

angular.bootstrap(document, ['myapp']);