可在角网格中的小部件之间拖动
Draggable between widgets in angular-gridster
我正试图使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>
drag.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'
});
}
}
}
MyCtrl:
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" }
];
};
当窗口小部件不处于拖动状态时,只需重置栅格项目z索引:
.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;
}
相关文章:
- javascript中两年之间的小时差(带闰年)
- 最小化在javascript中客户端/服务器之间发送的数据
- 如何要求用户输入一个介于 1 和 50 之间的整数,然后小程序打印出一行这个星数
- 可在角网格中的小部件之间拖动
- 小黄瓜-在场景之间保持状态
- 使用函数验证最小值和最大值之间的用户输入
- D3 力布局:如何保持节点之间的给定最小距离
- 如何获取两个日期对象之间的小时差
- 小胡子.java和小胡子之间的不兼容.js模板处理
- 如何计算两点之间的小时数;HHmm'在Javascript中
- JS正则表达式检查字符串的长度为字符数,介于最小值和最大值之间,不计算空格
- Jquery UI可排序小部件在可排序项之间具有分隔符
- 使用datejs和timejs计算两个日期之间经过的小时数
- 获取两个日期对象之间的小时差
- jquery ui小部件之间的冲突
- 在开始时间和结束时间之间选择小时数将引发警报,无论选择如何
- 指定infoVis JIT图中节点之间的最小距离
- 如何在页面加载之间保留nodejs聊天应用程序小部件
- 自动填充两个元素之间的空间,最小长度
- 如何在小函数之间传递数据——通过闭包还是通过对象的属性