1
我已成功實現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>
任何幫助將是有益的。 謝謝。
能否請您更具體的期望的結果是什麼對什麼是實際發生的? – Noam