我在我的项目中做了一个Angularjs拖放方法。我在拖放中没有任何问题,但是在采取下一步操作后,我遇到了如何为可拖动元素创建样式的问题。
在我的例子中,如果用户拖动Goose和Rabbit到标记为生产的动物的框中,用户将单击按钮Check Answer。每个可拖拽的div上方都会有正确或错误的符号。
我尝试检查元素,但我只看到了这些样式:
[ng-drag] {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.5);
color: #131313;
text-align: center;
padding-top: 12px;
display: inline-block;
margin: 5px 5px;
cursor: move;
border: 1px solid #ccc;
border-radius: 4px;
}
ng-drag指令被应用于每个可拖动元素。我如何区分它的每个元素并使其具有个性化的风格?这件事让我很困惑,需要你们所有人的帮助。有谁可以帮我?
我真的很感谢你的建议或帮助。
我的预期输出:
供您参考的代码片段:
var myApp = angular.module('MyApp',['ngDraggable']).controller('MyCtrl',function($scope){
$scope.checkAnswer = function()
{
}
$scope.centerAnchor = true;
$scope.toggleCenterAnchor = function () {
$scope.centerAnchor = !$scope.centerAnchor
};
var onDraggableEvent = function (evt, data) {
console.log("128", "onDraggableEvent", evt, data);
};
$scope.$on('draggable:start', onDraggableEvent);
$scope.$on('draggable:end', onDraggableEvent);
$scope.droppedObjects0 = [{name:'Goose'},{name:'Rabbit'},{name:'Chick'},{name:'Cat'}];
$scope.droppedObjects1 = []; //Answer: Cat + Rabbit
$scope.droppedObjects2 = []; //Answer: Chicken + Goose
$scope.AnswerOject1 = [{name:'Arnab'},{name:'Kucing'}];
$scope.AnswerOject2 = [{name:'Angsa'},{name:'Ayam'}];
$scope.onDropComplete0 = function (data, evt) {
console.log("127", "$scope", "onDropComplete0", data, evt);
var index = $scope.droppedObjects0.indexOf(data);
if (index == -1)
$scope.droppedObjects0.push(data);
};
$scope.onDropComplete1 = function (data, evt) {
console.log("127", "$scope", "onDropComplete1", data, evt);
var index = $scope.droppedObjects1.indexOf(data);
if (index == -1)
$scope.droppedObjects1.push(data);
};
$scope.onDragSuccess0 = function (data, evt) {
console.log("133", "$scope", "onDragSuccess0", "", evt);
var index = $scope.droppedObjects0.indexOf(data);
if (index > -1) {
$scope.droppedObjects0.splice(index, 1);
}
};
$scope.onDragSuccess1 = function (data, evt) {
console.log("133", "$scope", "onDragSuccess1", "", evt);
var index = $scope.droppedObjects1.indexOf(data);
if (index > -1) {
$scope.droppedObjects1.splice(index, 1);
}
};
$scope.onDragSuccess2 = function (data, evt) {
var index = $scope.droppedObjects2.indexOf(data);
if (index > -1) {
$scope.droppedObjects2.splice(index, 1);
}
};
$scope.onDropComplete2 = function (data, evt) {
var index = $scope.droppedObjects2.indexOf(data);
if (index == -1) {
$scope.droppedObjects2.push(data);
}
};
var inArray = function (array, obj) {
var index = array.indexOf(obj);
};
});
.body
{
width:500px;
margin-left:auto;
margin-right:auto;
}
[ng-drag] {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
[ng-drag] {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.5);
color: #131313;
text-align: center;
padding-top: 12px;
display: inline-block;
margin: 5px 5px;
cursor: move;
border: 1px solid #ccc;
border-radius: 4px;
}
ul.draggable-objects:after {
display: block;
content: "";
clear: both;
}
.draggable-objects li {
float: left;
display: block;
width: 50px;
height: 50px;
margin:2px;
}
[ng-drag].drag-over {
border: solid 1px red;
}
[ng-drag].dragging {
opacity: 0.5;
}
[ng-drop] {
background: rgba(198, 255, 198, 0.5);
text-align: center;
height: 150px;
padding-top: 10px;
display: block;
margin: 20px auto;
position: relative;
border: 1px solid #c3c3c3;
border-radius: 8px;
}
[ng-drop].drag-enter {
border: solid 5px red;
}
[ng-drop] span.title {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 20px;
margin-left: -100px;
margin-top: -10px;
}
[ng-drop] div {
position: relative;
z-index: 2;
}
.list-of-drag-item
{
height: 83px;
background-color: #f7f7f7;
}
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngDraggable/0.1.10/ngDraggable.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl" class="body">
Categorize the animals based on their reproductive system
<div class="row">
<div class="col">
<div class="list-of-drag-item" ng-drop="true" ng-drop-success="onDropComplete0($data,$event)">
<div ng-repeat="obj in droppedObjects0" ng-drag="true" ng-drag-data="obj"
ng-drag-success="onDragSuccess0($data,$event)" ng-center-anchor="{{centerAnchor}}">
{{obj.name}}
</div>
</div>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="col div-left">
<span class="title">Animals that give birth
<div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
<div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj"
ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}">
{{obj.name}}
</div>
</div>
</div>
<div class="col div-right">
<span class="title">Animals that Laying Eggs</span>
<div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)">
<div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"
ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}">
{{obj.name}}
</div>
</div>
</div>
</div>
<div style="text-align:center">
<button ng-click="checkAnswer()">Check Answer</button>
</div>
</div>
发布于 2016-09-30 09:41:03
check answer
-添加/删除body
元素上的reveal
类,添加后-使用css和#2中的值-框具有相关颜色(绿色/红色)。<代码>H29<代码>G210您可以使用此示例在拖放的框中添加一些其他html (V/X)。
以下是工作代码片段:
var myApp = angular.module('MyApp',['ngDraggable']).controller('MyCtrl',function($scope){
$scope.checkAnswer = function()
{
if (angular.element('body').hasClass("reveal")) {
angular.element('body').removeClass("reveal");
} else {
angular.element('body').addClass("reveal");
}
}
$scope.centerAnchor = true;
$scope.toggleCenterAnchor = function () {
$scope.centerAnchor = !$scope.centerAnchor
};
var onDraggableEvent = function (evt, data) {
console.log("128", "onDraggableEvent", evt, data);
};
$scope.$on('draggable:start', onDraggableEvent);
$scope.$on('draggable:end', onDraggableEvent);
$scope.droppedObjects0 = [{name:'Goose', goodbox: '2'},{name:'Rabbit', goodbox: '1'},{name:'Chick', goodbox: '2'},{name:'Cat', goodbox: '1'}];
$scope.droppedObjects1 = []; //Answer: Cat + Rabbit
$scope.droppedObjects2 = []; //Answer: Chicken + Goose
$scope.AnswerOject1 = [{name:'Arnab'},{name:'Kucing'}];
$scope.AnswerOject2 = [{name:'Angsa'},{name:'Ayam'}];
$scope.onDropComplete0 = function (data, evt) {
console.log("127", "$scope", "onDropComplete0", data, evt);
var index = $scope.droppedObjects0.indexOf(data);
if (index == -1)
$scope.droppedObjects0.push(data);
};
$scope.onDropComplete1 = function (data, evt) {
console.log("127", "$scope", "onDropComplete1", data, evt);
var index = $scope.droppedObjects1.indexOf(data);
if (data.goodbox == 1) {
data.class = 'good'
} else {
data.class = 'bad'
}
if (index == -1)
$scope.droppedObjects1.push(data);
};
$scope.onDragSuccess0 = function (data, evt) {
console.log("133", "$scope", "onDragSuccess0", "", evt);
var index = $scope.droppedObjects0.indexOf(data);
if (index > -1) {
$scope.droppedObjects0.splice(index, 1);
}
};
$scope.onDragSuccess1 = function (data, evt) {
console.log("133", "$scope", "onDragSuccess1", "", evt);
var index = $scope.droppedObjects1.indexOf(data);
if (index > -1) {
$scope.droppedObjects1.splice(index, 1);
}
};
$scope.onDragSuccess2 = function (data, evt) {
var index = $scope.droppedObjects2.indexOf(data);
if (index > -1) {
$scope.droppedObjects2.splice(index, 1);
}
};
$scope.onDropComplete2 = function (data, evt) {
var index = $scope.droppedObjects2.indexOf(data);
if (data.goodbox == 1) {
data.class = 'good'
} else {
data.class = 'bad'
}
if (index == -1) {
$scope.droppedObjects2.push(data);
}
};
var inArray = function (array, obj) {
var index = array.indexOf(obj);
};
});
.body
{
width:500px;
margin-left:auto;
margin-right:auto;
overflow: auto;
}
[ng-drag] {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
[ng-drag] {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.5);
color: #131313;
text-align: center;
padding-top: 12px;
display: inline-block;
margin: 5px 5px;
cursor: move;
border: 1px solid #ccc;
border-radius: 4px;
}
.reveal [ng-drag].good {
color: green;
}
.reveal [ng-drag].bad {
color: red;
}
ul.draggable-objects:after {
display: block;
content: "";
clear: both;
}
.draggable-objects li {
float: left;
display: block;
width: 50px;
height: 50px;
margin:2px;
}
[ng-drag].drag-over {
border: solid 1px red;
}
[ng-drag].dragging {
opacity: 0.5;
}
[ng-drop] {
background: rgba(198, 255, 198, 0.5);
text-align: center;
height: 150px;
padding-top: 10px;
display: block;
margin: 20px auto;
position: relative;
border: 1px solid #c3c3c3;
border-radius: 8px;
}
[ng-drop].drag-enter {
border: solid 5px red;
}
[ng-drop] span.title {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 20px;
margin-left: -100px;
margin-top: -10px;
}
[ng-drop] div {
position: relative;
z-index: 2;
}
.list-of-drag-item
{
height: 83px;
background-color: #f7f7f7;
}
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngDraggable/0.1.10/ngDraggable.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl" class="body">
Categorize the animals based on their reproductive system
<div class="row">
<div class="col">
<div class="list-of-drag-item" ng-drop="true" ng-drop-success="onDropComplete0($data,$event)">
<div ng-repeat="obj in droppedObjects0" ng-drag="true" ng-drag-data="obj"
ng-drag-success="onDragSuccess0($data,$event)" ng-center-anchor="{{centerAnchor}}">
{{obj.name}}
</div>
</div>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="col div-left">
<span class="title">Animals that give birth
<div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
<div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj"
ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}" class="{{obj.class}}">
{{obj.name}}
</div>
</div>
</div>
<div class="col div-right">
<span class="title">Animals that Laying Eggs</span>
<div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)">
<div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"
ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}" class="{{obj.class}}">
{{obj.name}}
</div>
</div>
</div>
</div>
<div style="text-align:center">
<button ng-click="checkAnswer()">Check Answer</button>
</div>
</div>
https://stackoverflow.com/questions/39695680
复制相似问题