JSFiddle - React, Tailwind, and code Playground

by maxxdev1985

HTML

<div ng-app="" ng-controller="MainController" class="drill-forms">
<a  href="#" ng-click="edit(43)">edit</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-if="(point.marker==true)"></div>
           </li>
       </ul>
</div>

CSS

ul.court{
   
    width:400px;
    height: 354px;
}
ul.court li{
    float:left;
    height:25px;
    width:27px;
    list-style: none;
}
ul.court li:nth-child(even){
    margin-right:0;
}

JavaScript

var app = angular.module('app', ['ui.sortable']);
    });

app.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) {
                }
            });

            if (scope.point.allowDrag == false) {
                element.draggable("disable");
            }else {
                element.draggable("enable");
            }

         scope.$watch('scope.courtPoints', function () {
            console.log('has changed');
         }, true);

        }
    };
});

app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
         
        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 () {
 alert(1);
            $scope.locations = [];
            $scope.newlocation = {};
        
            $scope.courtPoints = Array.range(0, 117);
        };

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