JSFiddle - React, Tailwind, and code Playground

by jpark7ca

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div ng-app="testApp">
    <div ng-controller="TestAppController as app">
        <!-- drop area -->
        <span>Drop here: </span>
        <div jp-draggable jp-drop="app.OnDrop(event)" jp-dragover="app.OnDragOver(event)" class="drop">            
        </div>
        <!-- list -->
        <div>
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="p in app.list">
                    <div id={{p.id}} jp-draggable jp-isdraggable="true" jp-dragstart="app.OnDragStart(event)" class="dragged" >
                        <i class="fa fa-arrows"></i> {{p.title}}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

div.drop {
    min-width: 200px;
    min-height: 80px;
    border: 1px solid #aaaaaa;
}

div.dragged{
    cursor: pointer;
}

JavaScript

angular.module('testApp', [])
.controller('TestAppController', function($scope, $http) {
    var app = this;
    
    app.list = [
        {
            id: 1,
            title: 'John Doe'
        },
        {
            id: 2,
            title: 'Pablo De Jesus'
        },
        {
            id: 3,
            title: 'Hong Gil Dong'
        }
    ];
    
    // Drag and drop section
    app.dataid = 0;
    
	app.OnDragStart = function(evt) {
        	
		app.dataid = evt.target.id;
        
        // for firefox
        evt.dataTransfer.setData("text", evt.target.id); 
	};
    
    app.OnDragOver = function(evt) {
		evt.preventDefault();			
	};
    
    app.OnDrop = function(evt) {				
		evt.preventDefault();
        evt.target.appendChild(document.getElementById(app.dataid));
	};    
})
.directive('jpDraggable', function() {
	return{
		scope: {
			myDragStart: '&jpDragstart',
			myDrop: '&jpDrop',
			myDragOver: '&jpDragover',
			myDragLeave: '&jpDragleave',
			myDragEnter: '&jpDragenter',
			myIsDraggable: '=jpIsdraggable'
		},
		link: function(scope, element, attrs)
		{			
			if(scope.myIsDraggable == true){
				//Add draggable attribute and set it to true
				if(!element.attr('draggable')){
					element.attr('draggable', true);
				}
			}
						
			element.on('dragstart', function(evt){
				scope.myDragStart({event: evt});
			});
			
			element.on('drop', function(evt){				
				scope.myDrop({event: evt});
			});
			
			element.on('dragover', function(evt){
				scope.myDragOver({event: evt});
			});
			
			element.on('dragleave', function(evt){
				scope.myDragLeave({event: evt});
			});
			
			element.on('dragenter', function(evt){
				scope.myDragEnter({event: evt});
			});
		}
	};
});