角度Js拖放 - 将指数传递给指令

我已成功实现Angular JS中的拖放功能。角度Js拖放 - 将指数传递给指令

基本的想法就像城市与国家匹配。我可以拖动城市并进入国家框。但是，丢弃的项目会反映在所有的国家/地区框中。但是由于我使用了ng-repeat，我发现很难在指令中获取$ index值。

我实现here：

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

 
module.controller("MainController", function ($scope) { 
 
    $scope.questions = [{ 
 
     city: "Delhi", 
 
     country: "India" 
 
    }, { 
 
     city: "Tokyo", 
 
     country: "Japan" 
 
    }, { 
 
     city: "Doha", 
 
     country: "Qatar" 
 
    }, ]; 
 

 
    $scope.answers = []; 
 

 
    $scope.handleDragStart = function (e) { 
 
     this.style.opacity = '0.9'; 
 
     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.$apply(function() { 
 
      $scope.answers[id].country = $scope.questions[$index].country 
 
      $scope.answers[id].city = dataText; 
 
     }); 
 
     console.log($scope.answers[$index]); 
 
    }; 
 

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

.container { 
 
    width: 100%; 
 
    border: 1px solid #CCC; 
 
    box-shadow: 0 1px 5px #CCC; 
 
    border-radius: 5px; 
 
    font-family: verdana; 
 
    margin: 25px auto; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float : right; 
 
} 
 
.container header { 
 

 
    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: 300%; 
 
    color: #333; 
 
} 
 
.default { 
 
    clear : both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="my-app"> 
 
    <div ng-controller="MainController"> 
 
     <h3>Match the following</h3> 
 

 
     <div class="container"> 
 
      <header> 
 
       <h1>Drag and drop a city into the corresponding Country box</h1> 
 

 
      </header> 
 
      <section> 
 
       <div draggable="true" ng-repeat="qs in questions">{{qs.city}}</div> 
 
      </section> 
 
     </div> 
 
     <div class="container" ng-repeat="qs in questions"> 
 
      <header> 
 
       <h1>{{qs.country}}</h1> 
 

 
      </header> 
 
      <section droppable="true"> <span>{{droppedCity}}</span> 
 
      </section> 
 
     </div> 
 
     <div class="default"> <pre>{{items|json}}</pre> 
 
     </div> 
 
    </div> 
 
</body>

任何帮助将是有益的。谢谢。

来源

2015-06-15 deeepss

能否请您更具体的期望的结果是什么对什么是实际发生的？ – Noam

你的代码有很多问题。我建议学习官方文档和一些与自定义指令相关的问题，并隔离范围。这里是许多变化的一些更新的代码和updated fiddle：

<body ng-app="my-app"> 
<div ng-controller="MainController"> 
    <h3>Match the following</h3> 

    <div class="container"> 
     <header> 
      <h1>Drag and drop a city into the corresponding Country box</h1> 

     </header> 
     <section> 
      <div draggable="true" ng-repeat="qs in questions" index="{{$index}}">{{qs.city}}</div> 
     </section> 
    </div> 
    <div class="container" ng-repeat="qs in questions"> 
     <header> 
      <h1>{{qs.country}}</h1> 

     </header> 
     <section droppable="true" index="{{$index}}"> <span>{{droppedCity}}</span> 
     </section> 
    </div> 
    <div class="default"> <pre>{{items|json}}</pre> 
    </div> 
</div>

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

module.directive('draggable', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      index: '@' 
     }, 

     link: function (scope, element, attrs) { 
      element[0].addEventListener('dragstart', scope.handleDragStart, false); 
      element[0].addEventListener('dragend', scope.handleDragEnd, false); 
     }, 
     controller: function($scope) { 
      $scope.handleDragStart = function (e) { 
       console.log('starting drag', $scope.index); 
       this.style.opacity = '0.9'; 
       e.dataTransfer.setData('text/plain', this.innerHTML); 
      }; 

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

module.directive('droppable', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      index: '@' 
     }, 
     link: function (scope, element, attrs) { 
      element[0].addEventListener('drop', scope.handleDrop, false); 
      element[0].addEventListener('dragover', scope.handleDragOver, false); 
     }, 
     controller: function($scope) { 
      $scope.handleDrop = function (e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       var dataText = e.dataTransfer.getData('text/plain'); 
       $scope.$parent.answers.push({country: $scope.$parent.questions[$scope.index].country}); 
       $scope.$parent.answers.push({city: $scope.$parent.questions[$scope.index].city});      
      }; 

      $scope.handleDragOver = function (e) { 
       e.preventDefault(); 
       e.dataTransfer.dropEffect = 'move'; 
       console.log('dragging over', $scope.$parent.questions[$scope.index].country); 
       return; 
      }; 
     } 
    }; 
}); 

module.controller("MainController", function ($scope) { 
    $scope.questions = [{ 
     city: "Delhi", 
     country: "India" 
    }, { 
     city: "Tokyo", 
     country: "Japan" 
    }, { 
     city: "Doha", 
     country: "Qatar" 
    }, ]; 

    $scope.answers = []; 
});

来源

2015-06-15 03:36:07 Noam

谢谢Noam。我只是试图将$ index推入该函数。确实忘了在指令定义本身中绑定范围。它解决了我的问题。谢谢。 – deeepss

角度Js拖放 - 将指数传递给指令

回答

相关问题