为什么这个拖放不起作用？

Question

我确实有一个ng-repeat谁拥有我想要拖放到textarea的所有attributs但它不起作用 我试过这个例子http://jsfiddle.net/jgoemat/CPRda/1/ 我注意到，当我拖放文本时，后面有一个空格（＆amp; nbsp），它确实有用

在我的控制器上我确实有这个

  // DRAG AND DROP
$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);
    alert($scope.emailTemplate.dataHtml);
};

$scope.handleDragOver = function (e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    return false;
};

我的HTML就像这样

  <div class="form-group" ng-class="{'has-error':NewRequest.dataHtml.$invalid}">
                <label for="Subject" class="col-sm-4 control-label"> Body:</label>
                <div class="col-sm-8">
                    <textarea droppable="true" ckeditor="editorOptions" placeholder="" ng-model="Template.dataHtml" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error':NewRequest.Draggable.$invalid}">
                <label for="Subject" class="col-sm-4 control-label"></label>
                <div class="col-sm-8">
                    <div class="container2">
                        <tabset justified="true">
                            <tab heading="FOLLOWUP"><div style='overflow:auto; height:100px;'><div draggable="true" ng-repeat="item in drag_types.FollowUpList">{{item.adresse}}</div> </div></tab>
                            <tab heading="TASK">
                                <div style='overflow:auto; height:100px;'>
                                    <div draggable="true" ng-repeat="item in drag_types.TaskList">{{item.adresse}}</div>
                                </div>
                            </tab>
                            <tab heading="PEOPLE">
                                <div style='overflow:auto; height:100px;'>
                                    <div draggable="true" ng-repeat="item in drag_types.List">{{item.adresse}}</div>
                                </div>
                            </tab>
                        </tabset>
                    </div>
                </div>
            </div>

最终我的指示就像这样

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

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