AngularJS-Direktiven mit der HTML5-drag-and-drop — Problem mit scope-Objekt

Ich bin ziemlich neu zu eckig und ich habe eine harte Zeit, die Verpackung in meinen Kopf, wo die Elemente, die geschoben werden. Ich bin nicht sicher, ob ich am richtigen Einstellung der Funktionen verwendet werden, mit drag/drop und wenn Ihr immer gebunden an einen älteren scope-Objekt und die ng-repeat ist nicht korrekt aktualisiert. Ich denke es gibt einige leichte Problem mit der Art, wie ich dieses setup. Jegliche Hinweise oder Hilfe wäre sehr geschätzt werden.

Was sollte passieren, wenn Sie ziehen Sie eine Farbe aus der Verschiebbare container in den Abwerfbaren Behälter sollte den text aktualisieren, die mit der scope-Objekte. Ich bin erfolgreich schieben Sie ein Element auf das scope-Objekt, aber ng-repeat ist nicht Kommissionierung es. Ich bin nicht sicher, ob ich brauche eine Uhr, oder was zu tun, um es zu achten, um die neu hinzugefügten Elemente.

JS Fiddle Hier: http://jsfiddle.net/RV23R/

HTML-CODE:

<div ng-app="my-app" ng-controller="MainController">
<div class="container">
    <header><h1>Draggables</h1></header>
    <section>
        <div draggable="true" ng-repeat="drag_type in drag_types">{{drag_type.name}}</div>
    </section>
</div>
<div class="container">
    <header><h1>Drop Schtuff Here</h1></header>
    <section droppable="true">
        <div><span>You dragged in: </span><span ng-repeat="items in items">{{item.name}},</span></div>
    </section>
</div>

ANGULAR CODE:

var module = angular.module('my-app', []);

module.directive('draggable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element[0].addEventListener('dragstart', scope.handleDragStart, false);
      element[0].addEventListener('dragend', scope.handleDragEnd, false);
    }
  }
});

module.directive('droppable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element[0].addEventListener('drop', scope.handleDrop, false);
      element[0].addEventListener('dragover', scope.handleDragOver, false);
    }
  }
});

function MainController($scope)
{
    $scope.drag_types = [
        {name: "Blue"},
        {name: "Red"},
        {name: "Green"},
    ];
    $scope.items = [];

    $scope.handleDragStart = function(e){
        this.style.opacity = '0.4';
        e.dataTransfer.setData('text/plain', this.innerHTML);
    };

    $scope.handleDragEnd = function(e){
        this.style.opacity = '1.0';
    };

    $scope.handleDrop = function(e){
        e.preventDefault();
        e.stopPropagation();
        var dataText = e.dataTransfer.getData('text/plain');
        $scope.items.push(dataText);
        console.log($scope.items);
    };

    $scope.handleDragOver = function (e) {
        e.preventDefault(); //Necessary. Allows us to drop.
        e.dataTransfer.dropEffect = 'move';  //See the section on the DataTransfer object.
        return false;
  };

}

CSS (wenn jemand kümmert)

.container {
  width: 600px;
  border: 1px solid #CCC;
  box-shadow: 0 1px 5px #CCC;
  border-radius: 5px;
  font-family: verdana;
  margin: 25px auto;
}

.container header {
  background: #f1f1f1;
  background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
  background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
  background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
  background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
  box-shadow: 0 1px 2px #888;
  padding: 10px;
}

.container h1 {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  text-shadow: 0 1px 2px white;
  color: #888;
  text-align: center;
}

.container section {
  padding: 10px 30px; 
  font-size: 12px;
  line-height: 175%;
  color: #333;
}

InformationsquelleAutor Skylude | 2013-10-24

Schreibe einen Kommentar