Dynamic grid on drag and drop Bootstrap

Question

my question how would I create a dynamic grid when dragging/droping items over the droppable area.

I would like to use jquery UI, because I would need it just for this feature, and that is a lot of code for only one thing.

I would like to do something like this http://mcpants.github.io/jquery.shapeshift/ but much less complicated.

I will attach a screen shot of my grid. The elements that are draggable are "ddd".

It is an angularjs APP, and I am using this library for drag and drop: https://github.com/fatlinesofcode/ngDraggable

Tried to use this library, but I could get it to work: https://github.com/RubaXa/Sortable

Any suggestions?

Answer 1

I'm currently integrating a grid and also tried various libraries, I've created a codepen to show you the working example, this is done using Angular and angular-gridster

I've added the class ddd for the draggable handlers, you'll notice I've declared the handler in $scope.gridsterOpts.draggable.handle

<div ng-app="mainApp" ng-controller="mainCtrl">
    <div gridster="gridsterOpts">
        <ul>
            <li gridster-item="item" ng-repeat="item in standardItems">
               <div class="ddd">Handle</div>
               {{ item }}
            </li>
        </ul>
    </div>
</div>
<script>
        var app = angular.module('mainApp', ['gridster']);

    app.controller('mainCtrl', ['$scope', function ($scope) {
            $scope.standardItems = [
                {size: {x: 2, y: 1}, position: [0, 0]},
                {size: {x: 2, y: 2}, position: [0, 2]},
                {size: {x: 1, y: 1}, position: [0, 4]},
                {size: {x: 1, y: 1}, position: [0, 5]},
                {size: {x: 2, y: 1}, position: [1, 0]},
                {size: {x: 1, y: 1}, position: [1, 4]},
                {size: {x: 1, y: 2}, position: [1, 5]},
                {size: {x: 1, y: 1}, position: [2, 0]},
                {size: {x: 2, y: 1}, position: [2, 1]},
                {size: {x: 1, y: 1}, position: [2, 3]},
                {size: {x: 1, y: 1}, position: [2, 4]}
            ];
            $scope.gridsterOpts = {
                minRows: 2, // the minimum height of the grid, in rows
                maxRows: 100,
                columns: 6, // the width of the grid, in columns
                colWidth: 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
                rowHeight: 'match', // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
                margins: [10, 10], // the pixel distance between each widget
                defaultSizeX: 2, // the default width of a gridster item, if not specifed
                defaultSizeY: 1, // the default height of a gridster item, if not specified
                mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
                resizable: {
                    enabled: true,
                    start: function (event, uiWidget, $element) {
                    }, // optional callback fired when resize is started,
                    resize: function (event, uiWidget, $element) {
                    }, // optional callback fired when item is resized,
                    stop: function (event, uiWidget, $element) {
                    } // optional callback fired when item is finished resizing
                },
                draggable: {
                    enabled: true, // whether dragging items is supported
                    handle: '.ddd', // optional selector for resize handle
                    start: function (event, uiWidget, $element) {
                    }, // optional callback fired when drag is started,
                    drag: function (event, uiWidget, $element) {
                    }, // optional callback fired when item is moved,
                    stop: function (event, uiWidget, $element) {
                    } // optional callback fired when item is finished dragging
                }
            };
        }]);
</script>

CodePen Example: codePen

Angular Gridster Library: angulargridster