Dynamic grid when dragging and dropping Bootstrap

Question

my question is: how to create a dynamic grid when dragging / dropping items over the drop area.

I would like to use jQuery UI, because I need it only for this function, and this is a lot of code for only one thing.

I would like to do something like http://mcpants.imtqy.com/jquery.shapeshift/ , but much less complicated.

I will attach a screenshot of my grid. The elements that are being dragged are ddd.

This is a corner APP, and I use this library to drag and drop: https://github.com/fatlinesofcode/ngDraggable

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

Any suggestions?

Answer 1

I am currently integrating a grid, and have also tried various libraries, I have created code to show you a working example, this is done using Angular and angular-gridster

I added a ddd class for draggable handlers, you will notice that I declared a 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