Динамическая сетка при перетаскивании Bootstrap

Question

Мой вопрос, как бы я создать динамическую сетку при перетаскивании элементов в области сбрасывания.

Я хотел бы использовать jquery UI, потому что он мне нужен только для этой функции, и это много кода только для одной вещи.

Я хотел бы сделать что-то вроде этого http://mcpants.github.io/jquery.shapeshift/ но гораздо менее сложным.

Я приложу снимок экрана моей сетки. Элементы, которые можно перетаскивать, это "ddd".

Это приложение angularjs, и я использую эту библиотеку для перетаскивания: https://github.com/fatlinesofcode/ngDraggable

Пытался использовать эту библиотеку, но я мог заставить ее работать: https://github.com/RubaXa/Sortable

Какие-либо предложения?

Answer 1

В настоящее время я интегрирую сетку, а также пробовал различные библиотеки, я создал кодовую ручку, чтобы показать вам рабочий пример, это делается с помощью Angular и Angular-Gridster.

Я добавил класс DDD для перетаскиваемых обработчиков, вы заметите, что я объявил обработчик в $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 Пример: codePen

Библиотека угловых гридстеров: angulargridster