JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="myApp">
    <div ng-controller="ctrl" class="container">
        <div class="row">
            <div class="col-xs-3 text-center">
                <div id="gallery-container">
                    <div class="row">
                        <div class="row" ng-repeat="card in cards">
                            <img droppable dng-drag-move="onDragStart($data,$event)" sng-drag-end="onDragStart($data,$event)" src="{{card.link}}" alt="" vertical-scroll="false" ng-drag="true" ng-drag-data="card" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" width="100px">
                        </div>
                    </div>
                </div>
            </div>
            <div ng-drag-clone="">
                <img ng-src="{{clonedData .link}}" width="100px">
            </div>
            <div style="min-height: 10px;" class="col-xs-5" ng-drop="true" ng-scroll="false" ng-drag-move="true" ng-drop-success="onDropComplete($event)">
                <draggableClone></draggableClone>
                 <h2> Drop Area </h2>

                <div ng-repeat="card in cardsDrop" ng-drag-success="onDragComplete($data,$event)" class="card">
                    <img src="{{card.link}}" class="card" alt="" width="100px">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#gallery-container {
overflow-y: scroll; 
   overflow-x: scroll; 
    } 
.card {
    width: 100px;
}
[ng-drag].drag-over {
    border:solid 1px red;
}
[ng-drag].dragging {
    opacity: 0;
}
[ng-drop] {
    background: rgba(0, 255, 0, 0.5);
    text-align: center;
    width: auto;
    height: auto;
}
[ng-drop].drag-enter {
    border:solid 5px red;
}

JavaScript

var app = angular.module('myApp', ['ngDraggable']);

app.controller('ctrl', function ($scope) {

    $scope.cloneSrc = 'http://www.download32.com/images/screen/vector_playing_cards-467278.png';

    $scope.cards = [{
        name: 'one',
        link: 'http://www.download32.com/images/screen/vector_playing_cards-467278.png'
    }, {
        name: 'two',
        link: 'http://sourceforge.net/p/vector-cards/screenshot/QS.png'
    }, {
        name: 'three',
        link: 'http://i1346.photobucket.com/albums/p682/ZeroHour1994/Sword%20of%20the%20Atom/2012StrongSuitsSuperheroPlayingCardsTheAtombyCraigBostick.jpg'
    }];
    $scope.cardsDrop = [];


    $scope.onDropComplete = function (data, evt) {

    }


    $scope.handleDrop = function (e) {
        console.log('Drop');
    };
    $scope.handleDragOver = function (e) {
        console.log('DragOver');
    };


    $scope.onDragComplete = function (data, evt) {
        console.log("133", "$scope", "onDragSuccess1", "", data);
        var index = $scope.cards.indexOf(data);
        if (index > -1) {
            $scope.cards.splice(index, 1);
        }

        $scope.cardsDrop.push(data);
    };

    $scope.onDragStart = function (data, evt) {
        console.log(data);
        $scope.cloneSrc = data.link;

    };


});