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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es ein paar Tippfehler in der Geige, aber das grundlegende problem ist, dass Ihr drag-Ereignisse sind, die außerhalb einer eckigen digest-Zyklus. Sollten Sie wickeln Sie Ihre änderungen in
$scope.$apply
(code-Beispiel zu kommen). Dieses Gabel-und bugfixed (FIDDLE) zeigt, dass, wenn Sie klicken Sie auf die Schaltfläche, Winkel zeigt die änderungen an und aktualisiert die Anzeige mit den neuen Werten.Update: (FIDDLE)
Einen Fehler, den Sie haben, ist in diesem code:
Dies dürfte wohl
ng-repeat="item in items"
auch Elemente enthält nur den text gelöscht, so ist es ein array von strings und nicht die ursprüngliche Position der Objekte.InformationsquelleAutor Jason Goemaat