JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app="scrumModule">
    <div ng-controller="Ctrl3">
        {{value}}
        <input type="text" keyup="test(value)" />
        
        <div class="place" drop="test(value)" ondragover="allowDrop(event)">
            aaa
        </div>
        
        <div class="item" draggable="true" ondragstart="drag(event)" id="drag1">Drag me!</div>  
        </div>
    </div>
</div>

CSS

.place{
    width: 150px;
    height: 150px;
    background: #ccc;
}

.item{
    background: red;
}

JavaScript

function Ctrl3($scope) {
    $scope.value = 10;
    $scope.test = function(item) {
        alert("test");
        alert(item);
    }
}
        
angular.module('scrumModule', [])
  .directive('keyup', function(){
    return {
      link: function(scope, element, attrs) {
        element.bind("keyup", function() {
            scope.$apply(attrs.keyup);    
        });
      }
    }
  });

angular.module('scrumModule', [])
  .directive('drop', function(){
    return {
      link: function(scope, element, attrs) {
          console.log("drop");
        element.bind("drop", function() {
            console.log("bind");
            scope.$apply(attrs.drop);    
        });
      }
    }
  });
  
      
      function allowDrop(ev)
{
ev.preventDefault();
}
      function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}