JSFiddle - React, Tailwind, and code Playground

by rushijogle

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-resource.min.js"></script>
            
             <div class="row" ng-controller="OverviewCtrl">
            <div class="col-md-5" > 
                <div class="panel panel-default">
                    <div class="panel-heading"><h4>List 1</h4></div>
                    <div class="panel-body">
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat="item in list1" ng-click="toggle(item.title)" >{{item.title}}</li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="col-md-2" style="text-align: center"> 
                <button type="button" class="btn btn-success"  style="margin-top: 70px; margin-bottom: 10px">
                    <span class="glyphicon glyphicon-triangle-right btn-sm" aria-hidden="true"></span>
                </button>
                </br>
                <button type="button" class="btn btn-success"  style="margin-top: 10px; margin-bottom: 10px">
                    <span class="glyphicon glyphicon-triangle-left btn-sm" aria-hidden="true"></span>
                </button>
            </div>
            <div class="col-md-5">
                <div class="panel panel-default">
                    <div class="panel-heading"><h4>List 2</h4></div>
                    <div class="panel-body">
                        <ul class="list-group">
              ...

JavaScript

var App = angular.module('myApp', ['ngDragDrop']);
            App.controller('OverviewCtrl', function ($scope) {
                $scope.list2 = [
                    {'title': 'Item 1'},
                    {'title': 'Item 2'},
                    {'title': 'Item 7'},
                    {'title': 'Item 8'}
                ];
                $scope.list1 = [
                    {'title': 'Item 1'},
                    {'title': 'Item 2'},
                    {'title': 'Item 3'},
                    {'title': 'Item 4'},
                    {'title': 'Item 5'},
                    {'title': 'Item 6'},
                    {'title': 'Item 7'},
                    {'title': 'Item 8'}
                ];
                $scope.toggle = function(test,$scope){
                   // alert(test)
                    $scope.list2.push($scope.list2.title.test);
                }
                

            });