JSFiddle - React, Tailwind, and code Playground

by jwanga

HTML

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div ng-app="app" ng-controller="controller">
    <script type="text/ng-template" id="itemTemplate.html">
        <b>{{item}}</b>
    </script>
    
    <ul id="list1">
        <li ng-repeat="item in list1" draggable>{{item}}</li>
    </ul>
    <ul id="list2" sortable>
        <li ng-repeat="item in list2" ng-include="'itemTemplate.html'"></li>
    </ul>
    
</div>

CSS

li{
    cursor: move;  
}

JavaScript

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

app.controller('controller', function($scope) {
    $scope.list1=['1','2','3'];
    $scope.list2=['4','5','6'];
})

app.directive('sortable', function($compile) {
    return {
        link: function ($scope, $element, $attrs) {
            var sortable, newScope;
            newScope = $scope.$new();
            newScope.item='foo';
            sortable = $element.sortable({
                stop: function(event, ui){
                    ui.item.replaceWith('<li id="foo" ng-include="\'itemTemplate.html\'"></li>')
                    $compile($element.find('#foo'))(newScope)
                    $scope.$apply();
                    console.log($scope.list2);
                }
            });
        }
    }
})

app.directive('draggable', function() {
    return {
        link: function ($scope, $element, $attrs) {
            var draggable;
            draggable = $element.draggable({
                connectToSortable:'#list2',
                helper: 'clone'
            });
        }
    }
})