可在 angular-gridster 中的小部件之间拖动

Posted 2023-05-08

【中文标题】可在 angular-gridster 中的小部件之间拖动

【英文标题】：Draggable between widgets in angular-gridster

【发布时间】：2015-04-20 19:40:43

【问题描述】：

我正在尝试使widget1 中的一些项目可拖动并将其放入widget2 的可放置对象中，但我无法让z-index 工作。将可拖动项目拖到widget2 上时会消失。如何做到这一点？

更新

main.html:

<div ng-controller="myCtrl">
<div gridster="gridsterOpts">
    <ul><li gridster-item="module" ng-repeat="module in modules" ng-include="module.content"></li></ul>
</div>

拖动.html：

<div class="panel panel-default">
<div class="panel-heading">
    drag widget
</div>
<div class="panel-body" drag>
    <div class="well">drag this</div>
</div>

drop.html:

<div class="panel panel-default">
<div class="panel-heading">
    drag widget
</div>
<div class="panel-body" drop>
    <div class="well">drop here</div>
</div>

可拖动指令：

function drag() 
return 
    restrict: "A",
    scope: ,
    link: function (scope, elem, attrs) 
        elem.draggable(
            zIndex: 1000,
            helper: 'clone'
        );
    

我的Ctrl：

function myCtrl($scope) 
$scope.gridsterOpts = 
    columns: 6, // the width of the grid, in columns
    pushing: true, // whether to push other items out of the way on move or resize
    floating: false, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
    swapping: false, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
    width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
    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
    outerMargin: true, // whether margins apply to outer edges of the grid
    isMobile: false, // stacks the grid items if true
    mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
    mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
    minColumns: 1, // the minimum columns the grid must have
    minRows: 2, // the minimum height of the grid, in rows
    maxRows: 20,
    defaultSizeX: 2, // the default width of a gridster item, if not specifed
    defaultSizeY: 1, // the default height of a gridster item, if not specified
    minSizeX: 1, // minimum column width of an item
    maxSizeX: null, // maximum column width of an item
    minSizeY: 1, // minumum row height of an item
    maxSizeY: null, // maximum row height of an item
    resizable: 

        enabled: true,
        handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
        start: function (event, $element, widget)  , // optional callback fired when resize is started,
        resize: function (event, $element, widget)  , // optional callback fired when item is resized,
        stop: function (event, $element, widget)   // optional callback fired when item is finished resizing
    ,
    draggable: 
        scroll: false,
        enabled: true, // whether dragging items is supported
        handle: ".panel-heading", // optional selector for resize handle
        start: function (event, $element, widget)  , // optional callback fired when drag is started,
        drag: function (event, $element, widget)  , // optional callback fired when item is moved,
        stop: function (event, $element, widget)   // optional callback fired when item is finished dragging
    
;
$scope.modules = [
 sizeX: 1, sizeY: 2, row: 0, col: 0, content: "views/modules/drag.html" ,
 sizeX: 1, sizeY: 2, row: 0, col: 2, content: "views/modules/drop.html" 
];

;

【问题讨论】：

抱歉，现在添加了

【参考方案1】：

当小部件不处于拖动状态时，只需重置 gridster item z-index：

  .gridster-item:not(.gridster-item-moving) 
    //drop z-index to make it possible to set higher than 2 z-index for widget elements
    z-index: initial;