Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 14, 2014 16:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/f78eae2d07e2342c31dd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/f78eae2d07e2342c31dd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 14, 2014.
    31 changes: 31 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <div ng-app="sortableApp" ng-controller="sortableController" class="container">
    <h2>ui.sortable connected lists event order</h2>

    <div class="floatleft">
    <input ng-model="customKey"/><input ng-model="customValue"/>
    <button type="button" ng-click="addCustomItem()">Add Custom</button>
    <div id="benefits" ui-sortable="sortableOptionsList[0]" class="apps-container screen floatleft" ng-model="rawScreens[0]">
    <div class="app" ng-repeat="app in rawScreens[0]">{{$index}} {{app.title}}</div>
    </div>
    <div id="slots" ui-sortable="sortableOptionsList[1]" class="apps-container screen floatleft" ng-model="rawScreens[1]">
    <div class="app" ng-repeat="app in rawScreens[1]">{{$index}} {{app.title}}</div>
    </div>
    <div style="clear: both;"></div>
    </div>

    <div class="floatright">
    <button type="button" ng-click="logModels()">Log Models</button>
    <ul class="list logList">
    <li ng-repeat="entry in sortingLog" class="logItem">
    {{entry}}
    </li>
    </ul>
    </div>

    <div class="clear"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
    <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
    </div>
    141 changes: 141 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,141 @@
    var myapp = angular.module('sortableApp', ['ui.sortable']);


    myapp.controller('sortableController', function ($scope) {
    var tmpList = [];

    $scope.rawScreens = [
    [{
    icon: './img/icons/facebook.jpg',
    title: 'Facebook (a)',
    link: 'http://www.facebook.com'
    }, {
    icon: './img/icons/youtube.jpg',
    title: 'Youtube (a)',
    link: 'http://www.youtube.com'
    }, {
    icon: './img/icons/gmail.jpg',
    title: 'Gmail (a)',
    link: 'http://www.gmail.com'
    }, {
    icon: './img/icons/google+.jpg',
    title: 'Google+ (a)',
    link: 'http://plus.google.com'
    }, {
    icon: './img/icons/twitter.jpg',
    title: 'Twitter (a)',
    link: 'http://www.twitter.com'
    }, {
    icon: './img/icons/yahoomail.jpg',
    title: 'Yahoo Mail (a)',
    link: 'http://mail.yahoo.com'
    }, {
    icon: './img/icons/pinterest.jpg',
    title: 'Pinterest (a)',
    link: 'http://www.pinterest.com'
    }],
    [{
    icon: './img/icons/facebook.jpg',
    title: 'Facebook (b)',
    link: 'http://www.facebook.com'
    }, {
    icon: './img/icons/youtube.jpg',
    title: 'Youtube (b)',
    link: 'http://www.youtube.com'
    }, {
    icon: './img/icons/gmail.jpg',
    title: 'Gmail (b)',
    link: 'http://www.gmail.com'
    }, {
    icon: './img/icons/google+.jpg',
    title: 'Google+ (b)',
    link: 'http://plus.google.com'
    }, {
    icon: './img/icons/twitter.jpg',
    title: 'Twitter (b)',
    link: 'http://www.twitter.com'
    }, {
    icon: './img/icons/yahoomail.jpg',
    title: 'Yahoo Mail (b)',
    link: 'http://mail.yahoo.com'
    }, {
    icon: './img/icons/pinterest.jpg',
    title: 'Pinterest (b)',
    link: 'http://www.pinterest.com'
    }]
    ];


    $scope.sortingLog = [];

    function createOptions (listName) {
    var _listName = listName;
    var options = {
    placeholder: "app",
    connectWith: ".apps-container",
    activate: function() {
    console.log("list " + _listName + ": activate");
    },
    beforeStop: function() {
    console.log("list " + _listName + ": beforeStop");
    },
    change: function() {
    console.log("list " + _listName + ": change");
    },
    create: function() {
    console.log("list " + _listName + ": create");
    },
    deactivate: function() {
    console.log("list " + _listName + ": deactivate");
    },
    out: function() {
    console.log("list " + _listName + ": out");
    },
    over: function() {
    console.log("list " + _listName + ": over");
    },
    receive: function() {
    console.log("list " + _listName + ": receive");
    },
    remove: function() {
    console.log("list " + _listName + ": remove");
    },
    sort: function() {
    console.log("list " + _listName + ": sort");
    },
    start: function() {
    console.log("list " + _listName + ": start");
    },
    stop: function() {
    console.log("list " + _listName + ": stop");
    },
    update: function(event, ui) {
    // check that its an actual moving
    // between the two lists
    if (event.target.id !== 'slots' && ui.item.sortable.droptarget.attr('id') === 'slots' && $scope.rawScreens[1].length >= 10) {
    ui.item.sortable.cancel();
    }
    }
    };
    return options;
    }

    $scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
    $scope.customKey = "";
    $scope.customValue = "";
    $scope.keyValue = $scope.customKey + " " + $scope.customValue;
    $scope.addCustomItem = function(){
    $scope.rawScreens[0].push({title:$scope.customKey + " " + $scope.customValue});
    }

    $scope.logModels = function () {
    $scope.sortingLog = [];
    for (var i = 0; i < $scope.rawScreens.length; i++) {
    var logEntry = $scope.rawScreens[i].map(function (x) {
    return x.title;
    }).join(', ');
    logEntry = 'container ' + (i+1) + ': ' + logEntry;
    $scope.sortingLog.push(logEntry);
    }
    };
    });
    73 changes: 73 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    .list {
    list-style: none outside none;
    margin: 10px 0 30px;
    }

    .apps-container {
    border: 2px dashed blue;
    margin: 10px 10px 0 0;
    padding: 5px;
    }

    .app {
    width: 170px;
    padding: 5px 10px;
    margin: 5px 0;
    border: 2px solid #444;
    border-radius: 5px;
    background-color: #EA8A8A;

    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    cursor: move;
    }


    /*** Extra ***/

    body {
    font-family: Verdana, 'Trebuchet ms', Tahoma;
    }

    .logList {
    margin-top: 20px;
    width: 250px;
    min-height: 300px;
    padding: 5px 15px;
    border: 5px solid #000;
    border-radius: 15px;
    }

    .logItem {
    margin-bottom: 10px;
    }

    .logList:before {
    content: 'log';
    padding: 0 5px;
    position: relative;
    top: -1.1em;
    background-color: #FFF;
    }

    .container {
    width: 750px;
    margin: auto;
    }

    h2 {
    text-align: center;
    }

    .floatleft {
    float: left;
    }

    .floatright {
    float: right;
    }

    .clear {
    clear: both;
    }
    9 changes: 9 additions & 0 deletions ui.sortable-connected-lists-event-order.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    ui.sortable connected lists event order
    ---------------------------------------


    Forked from [Thodoris Greasidis](http://codepen.io/thgreasi/)'s Pen [ui.sortable connected lists event order](http://codepen.io/thgreasi/pen/uIBKb/).

    A [Pen](http://codepen.io/anon/pen/LEYOKQ) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/LEYOKQ/license).