拖放引导上的动态网格

Posted 2023-05-08

【中文标题】拖放引导上的动态网格

【英文标题】：Dynamic grid on drag and drop Bootstrap

【发布时间】：2014-10-22 15:53:55

【问题描述】：

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

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

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

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

它是一个angularjs APP，我正在使用这个库进行拖放：https://github.com/fatlinesofcode/ngDraggable

尝试使用这个库，但我可以让它工作： https://github.com/RubaXa/Sortable

有什么建议吗？

【问题讨论】：

你有什么解决办法吗？如果是，请分享。我想要同样的东西。

我所做的是，我引导 col 类并根据 UI + 窗口宽度更改它们的宽度。

【参考方案1】：

我目前正在集成网格并尝试了各种库，我创建了一个 codepen 来向您展示工作示例，这是使用 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

【讨论】：

欢迎来到 Stack Overflow！通常，链接到工具或库should be accompanied by usage notes, a specific explanation of how the linked resource is applicable to the problem, or some sample code，或者如果可能，链接到以上所有内容。