AngularJS directives avec HTML5 faites glisser et déposez — le problème avec l'objet de l'étendue
Je suis assez nouveau dans angulaire et je vais avoir un moment difficile de l'emballage de ma tête autour de l'endroit où les éléments sont en train d'être poussé. Je ne suis pas sûr si je suis paramétrer correctement les fonctions pour être utilisé avec le glisser/déposer et si son être lié à une ancienne objet de l'étendue et de la ng-repeat n'est pas mis à jour correctement. Je pense il y a un léger problème avec la façon que j'ai de cette configuration. Tous les pointeurs ou de l'aide serait grandement appréciée.
Ce qui devait arriver est lorsque vous faites glisser une couleur de la Déplaçable récipient dans le Drop, conteneur, il devrait mettre à jour le texte qui est liée à la portée éléments de l'objet. Je suis avec succès en poussant un article sur le champ d'application de l'objet, mais ng-repeat n'est pas le ramasser. Je ne suis pas sûr si j'ai besoin d'une montre ou ce qu'il faut faire pour l'avoir à payer attention aux nouveaux éléments ajoutés.
JS Fiddle Ici: http://jsfiddle.net/RV23R/
CODE HTML:
<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>
ANGULAIRE 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 (si quelqu'un se soucie)
.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;
}
OriginalL'auteur Skylude | 2013-10-24
Vous devez vous connecter pour publier un commentaire.
Il y a quelques fautes de frappe dans le violon, mais le problème de base est que votre faites glisser les événements sont à l'extérieur angulaire à digérer cycle. Vous devez envelopper vos modifications dans
$scope.$apply
(exemple de code à venir). Cette fourche et erreurs (FIDDLE) montre que, lorsque vous cliquez sur le bouton, angulaire montre les changements et actualise l'affichage avec de nouvelles valeurs.Correctif: (FIDDLE)
Un bug que vous avez eu est dans ce code:
Cela devrait probablement être
ng-repeat="item in items"
, aussi les articles ne contient que la baissé de texte de sorte qu'il est un tableau de chaînes de caractères et non pas l'élément d'origine des objets.OriginalL'auteur Jason Goemaat