Shapeshift Simple in AngularJS 32

by manoj

HTML

<script src="http://mcpants.github.io/jquery.shapeshift/core/jquery.shapeshift.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div ng-app="myapp">
    <div class="container" shapeshift="{minColumns: 3, animationSpeed: 100}">
        <div></div>
        <div></div>
        <div data-ss-colspan='2'></div>
        <div></div>
    </div>
    
    <div class="container" shapeshift="{minColumns: 3}">
        <div></div>
        <div data-ss-colspan='2'></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

.container {
    border: 1px dashed #ccc;
    position: relative;
}

.container > div {
    background: #CCC;
    height: 100px;
    position: absolute;
    width: 80px;
}

.container > div[data-ss-colspan='2'] { width: 170px; }

.container .ss-placeholder-child {
    background: transparent;
    border: 1px dashed red;
}

JavaScript

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

app.directive('shapeshift', function(){
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                $(element).shapeshift(scope.$eval(attrs.shapeshift));
                
                element.on('ss-arranged', function(e){
                    // When an item is dragged around in a container, arranged is triggered every time items are shifted.
                    console.log('Rearranging');
                });

                element.on('ss-rearranged', function(e, selected){
                    // When an item is dropped into the container it originated from.
                    // We can use jQuery selectors here because of the jQuery reference.
                    console.log('This container: ' + $(element));
                    console.log('Has rearranged this item: ' + $(selected));
                    console.log('Into this position: ' + $(selected).index());
                });
                
                element.on('ss-drop-complete', function(e){
                    // When an item is dropped into a container, this gets called when it has stopped moving to its new position.
                    console.log('Done');
                });
            }
        };
    }
);