JSFiddle - React, Tailwind, and code Playground

by Mujtaba Hussain

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div ng-app="myApp" ng-controller="customersCtrl">
  <button ng-click="createElement()" id="btnCreateElement" ng-disabled="objs.length==count">ClickToAdd</button>

  <div id="target">
    <div class="test"  ng-repeat ="obj in objs"><i class="fa fa-times delIcon" aria-hidden="true" ng-click="deleteDiv($index)"></i>{{$index}} of {{obj.id}}</div>
  </div>
  <div class="tryIt" ng-if="showDiv"  ng-click="toogleElement()"></div>
  <div class="tryIt" id="redDiv" ng-if="!showDiv" ng-click="toogleElement()"></div>

</div>

CSS

.test {
   width: 400px;
   height: 30px;
   background: green;
   margin: 10px 0;
 }
 
 .tryIt {
   width: 200px;
   height: 200px;
   background: #00B3E3;
   margin-left: 50%;
   position: relative;
 }
 
 #target>div:nth-child(2) {
   background: blue;
 }
 
 #redDiv {
   background: red;
 }
 
 #btnCreateElement {
   cursor: pointer;
 }
 
 #btnCreateElement:disabled {
   cursor: no-drop;
 }
 .delIcon{    position: relative;
    float: right;
    padding: 5px;
    color: white;
    cursor:pointer;}

JavaScript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.showDiv = true;
  $scope.objs =[ ];
  $scope.count=5;
  var idCounter=1;
  $scope.createElement = function() {
  $scope.objs.push({id:idCounter++});
  }
  $scope.toogleElement = function() {
    $scope.showDiv = !$scope.showDiv;
  }
$scope.deleteDiv = function(index){
console.log("index is",index);
$scope.objs.splice(index,1);

}

});
app.directive('ngDraggable', function($document, $window){
  function makeDraggable(scope, element, attr) {
    var startX = 0;
    var startY = 0;

    // Start with a random pos
    var x = Math.floor((Math.random() * 500) + 40);
    var y = Math.floor((Math.random() * 360) + 40);

    element.css({
      position: 'absolute',
      cursor: 'pointer',
      top: y + 'px',
      left: x + 'px'
    });

    element.on('mousedown', function(event) {
      event.preventDefault();
      
      startX = event.pageX - x;
      startY = event.pageY - y;

      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;

      element.css({
        top: y + 'px',
        left: x + 'px'
      });
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  }
  return {
    link: makeDraggable
  };
});