Eckige Gridster machen ziehbar nur für bestimmte im Netz

Ich bin mit ManifestWebDesign Winkel Gridster und nicht in der Lage zu aktivieren, ziehen Sie nur für einen bestimmten Teil des Rasters, wie gezeigt, in der Gridster Demo-Beispiel unten.

Erwartet, arbeiten wie Gridster-Demo

Derzeit mit den eckigen gridster-Konfiguration hier gezeigt - check-handle-option unter ziehbar

Implementierte ich eine plunker hier - Eckige Gridster Die plunker Beispiel benutzt '.my-class', wie gezeigt, in der Konfiguration.

Nicht sicher, wie man 'handle-option unter ziehbar Arbeit".

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 }
    ];
 });

InformationsquelleAutor Sudarsan GP | 2015-09-30

angularjs gridster

In meinem Fall, verursacht wurde dies durch eine race-Bedingung, wo der Griff css-picker ausgeführt wurde, bevor der DOM-Elementen, wobei auch dort - also es hat nicht richtig funktioniert.
Ich habe gesehen, dass die Winkel-gridster wurde codiert, auf diese Weise vor, aber es wurde geändert in der letzten version, also habe ich rückgängig gemacht, die änderungen, die hier durch das einwickeln von es mit eine timeout-Funktion (in der angular-gridster.js Datei).

$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;
    });
};

Und noch eins:

$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();
    }

});

InformationsquelleAutor Roy Horev

Müssen Sie die option name, was haben Sie in den Controller. Im controller, die Sie verwendet haben '$Umfang.gridsterConfiguration", sondern in der html-Sie haben es verwendet als 'gridsterOptions'. Ändern Sie es zu gridster='gridsterConfiguration' in html als auch. Es funktioniert!!

JS:

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 }
];
});

CSS:

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

HTML:

<!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>

Ist, und den aktualisierten Plunker - hier

InformationsquelleAutor Suresh PMS

-2

Code aus
https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js
was enthalten ist in Ihre HTML-plunker Beispiel ist nicht die Letzte version und ist nicht das gleiche wie hier:
https://github.com/ManifestWebDesign/angular-gridster/blob/master/src/angular-gridster.js
(GitHub), Bitte, verwenden Sie diese Datei/code.

Für mich, diese Funktion arbeitet.

P. S. sei vorsichtig mit dem Objekt-Feld-Namen. Griff und Griffe (für in der Größe anpassbar ist, handles)

InformationsquelleAutor user3759793

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.