Angular Gridster 仅可拖动网格内的特定部分答案

【问题标题】：Angular Gridster make draggable only for particular part inside gridAngular Gridster 仅可拖动网格内的特定部分
【发布时间】：2015-12-28 06:44:43
【问题描述】：

我正在使用ManifestWebDesign Angular Gridster 并且无法仅对网格的特定部分启用拖动，如下面的 Gridster 演示示例所示。

预计会像Gridster Demo一样工作

当前使用此处显示的 angular gridster 配置 - check handle option under draggable

我在这里实现了一个 plunker - Angular Gridster plunker 示例使用'.my-class'，如配置所示。

不确定如何使“可拖动工作下的句柄选项”。

HTML

 <body ng-app='gridsterApp'>
   <div ng-controller='gridsterController'>
     <div gridster='gridsterOptions'>
       <ul>
         <li gridster-item="item" ng-repeat="item in standardItems">
           <div class='my-class'>Drag Here</div>
         </li>
       </ul>
     </div>
   </div>
 </body>

Javascript

 angular.module('gridsterApp', ['gridster'])
   .controller('gridsterController', function($scope){
     $scope.gridsterConfiguration = {
        isMobile: false,
        defaultSizeX: 2,
        defaultSizeY: 2,
        resizable: {
            enabled: true
        },
        draggable: {
            enabled: true,
            handle: '.my-class'
        },
        margin: [10,10]
    };

    $scope.standardItems = [
     { sizeX: 2, sizeY: 1, row: 0, col: 0 },
     { sizeX: 2, sizeY: 2, row: 0, col: 2 }
    ];
 });

【问题讨论】：

标签： angularjs gridster

【解决方案1】：

您必须使用您在控制器中使用的相同选项名称。在控制器中，您使用了 '$scope.gridsterConfiguration'，但在 html 中，您将其用作 'gridsterOptions'。在 html 中也将其更改为 gridster='gridsterConfiguration'。有用！！

angular.module('gridsterApp', ['gridster'])
.controller('gridsterController', function($scope){
  		$scope.gridsterConfiguration = {
			isMobile: false,
			defaultSizeX: 2,
			defaultSizeY: 2,
			resizable: {
				enabled: true
			},
			draggable: {
				enabled: true,
				handle: '.my-class'
			},
			margin: [10,10]
		};
		
		$scope.standardItems = [
  { sizeX: 2, sizeY: 1, row: 0, col: 0 },
  { sizeX: 2, sizeY: 2, row: 0, col: 2 }
];
});

/* Styles go here */
    .gridster-item {
        background-color: darkgrey;
    }
    .my-class{
      border:1px solid red;
      height:50px;
    }

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-resize/1.1/jquery.ba-resize.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js'></script>
  <script src='https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js'></script>
  <script src="script.js"></script>
</head>

<body ng-app='gridsterApp'>
  <h4>Please increase width of window to see the gridster items to make them draggable</h4>
  <div ng-controller='gridsterController'>
    <span> Dragging needs to work only on clicking <strong>Drag Here</strong> below inside the grid, but currently works for entire grid.</span>
    <a href='http://gridster.net/demos/custom-drag-handle'>Gridster Expected Interaction Example</a>
    <div gridster='gridsterConfiguration'>
      <ul>
        <li gridster-item="item" ng-repeat="item in standardItems">
          <div class='my-class'>Drag Here</div>
          <span> drag using text below</span>

        </li>
      </ul>
    </div>
  </div>
</body>

</html>

还有更新的 Plunker - here

【讨论】：

【解决方案2】：

代码来自 https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js 在 plunker 示例中包含在您的 HTML 中的不是最后一个版本，并且与此处的不同： https://github.com/ManifestWebDesign/angular-gridster/blob/master/src/angular-gridster.js (GitHub) 请使用这个文件/代码。

对我来说，这个功能很有效。

附：请注意对象字段名称。句柄和句柄（用于可调整大小的是句柄）

【讨论】：

【解决方案3】：

在我的例子中，这是由句柄 css 选择器在 DOM 元素之前运行的竞争条件引起的 - 所以它不能正常工作。我已经看到 angular-gridster 以前是这样编码的，但在上一个版本中被更改了，所以我通过用超时函数（在 angular-gridster.js 文件中）包装它来恢复 chages。

$timeout(function() {
    enabled = true;

    // timeout required for some template rendering
    $el.ready(function() {
        if (enabled !== true) {
        return;
    }
    // disable any existing draghandles
    for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
        unifiedInputs[u].disable();
        unifiedInputs[h] = new GridsterTouch($dragHandles[h], mouseDown, mouseMove, mouseUp);
        unifiedInputs[h].enable();
    }

    enabled = true;
    });
};

还有一个：

$timeout(function() {

    for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
        unifiedInputs[u].disable();
    }
    enabled = false;

    unifiedInputs = [];
    enabled = false;
    for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
        unifiedInputs[u].disable();
    }

});

【讨论】：