Question

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

一样工作

目前使用此处显示的角度网格配置 - 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 }
    ];
 });

Answer 1

在我的情况下，这是由竞争条件引起的，其中句柄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();
    }

});

Answer 2

您必须使用在Controller中使用的相同选项名称。在控制器中，您使用了“ $ 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

Answer 3

来自的代码 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）请使用此文件/代码。

对我来说，这个功能正在发挥作用。

P.S。注意对象字段名称。把手和把手（可调整大小是把手）

Angular Gridster仅对网格内的特定部分进行拖动

3 个答案: