AngularJS Gridster如何知道哪个小部件开始拖动

时间:2015-02-25 09:59:44

标签: angularjs drag gridster

我想记录小部件'开始/停止调整大小/拖动。

我正在尝试在<li>内部设置标记(或名称)属性,并让它们处于拖动开始/停止事件中。

我该怎么做?

我的代码如下: HTML:

<div id="widgets" class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="yellow">
            <p style="white-space: pre;" name="Updates Widget">{{gridsterUpdates}}</p>
        </li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
            <div class="widget-container" ng-include="'widget-export.html'" tag="Export Widget"></div>
        </li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
            <div class="widget-container" ng-include="'widget-timeline.html'" tag="Timeline Widget"></div>
        </li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
            <div class="widget-container" ng-include="'widget-search.html'" tag="Search Widget"></div>
        </li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
            <div class="widget-container" ng-controller="FacetsCtrl" ng-include="'widget-facets.html'" tag="Facets  Widget"></div>
        </li>
    </ul>
</div>

控制器:

var gridster;

    $(function() {

        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [402, 299],
            widget_margins: [0, 0],
            resize: {
                enabled: true
            },
            draggable: {
                start: function(e, ui, $widget) {
                    $scope.gridsterUpdates = "NAME SHOULD BE HERE" + 'started dragging. Start position: ' + ui.position.top + ' ' + ui.position.left + '\n' + ($scope.gridsterUpdates || '');
                    $scope.$apply();
                },

                drag: function(e, ui, $widget) {
                },

                stop: function(e, ui, $widget) {
                    $scope.gridsterUpdates = "NAME SHOULD BE HERE" + ' stopped dragging. Stop position: ' + ui.position.top + ' ' + ui.position.left + '\n' + ($scope.gridsterUpdates || '');
                    $scope.$apply();
                }
            }
        }).data('gridster');
    });

0 个答案:

没有答案