angularjs - 拖放 Bootstrap 时的动态网格

Question

我的问题是如何在可放置区域上拖放项目时创建动态网格。

我想使用 jquery UI，因为我只需要它来实现这个功能，而这只是一件事的大量代码。

我想做这样的事情 http://mcpants.github.io/jquery.shapeshift/但要简单得多。

我将附上我的网格的屏幕截图。可拖动的元素是“ddd”。

这是一个angularjs APP，我使用这个库进行拖放: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

Angular Gridster 库: angulargridster