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="TestCtrl">
    <div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="item" draggable="true" ondragstart="drag(event)" id="drag1">{{test}}</div>  
        </div>
    <div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    </div>  
</div>

<input on-keyup="count = count + 1">

CSS

.item{
    background: #aaa;
    width: 50px;
    height: 50px;
}
[draggable=true] {
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

.div1{
    width: 150px;
    height: 150px;
    background: #ccc;
    float: left;
}

JavaScript

angular.module('scrumModule', []).directive('on-keyup', function() {
  return function(scope, elm, attrs) {
      alert("module");
    elm.bind("keyup", function() {
        alert("Test");
      scope.$apply(attrs.onKeyup);
    });
  };
});

function TestCtrl($scope) {
    $scope.test = 100;
}
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}



/*
myApp.directive('onKeyup', function() {
  return function(scope, elm, attrs) {
    elm.bind("keyup", function() {
      scope.$apply(attrs.onKeyup);
    });
  };
});
*/