单击按钮后为拖放 angularjs 实现 CSS3 样式

Posted

技术标签:

【中文标题】单击按钮后为拖放 angularjs 实现 CSS3 样式【英文标题】：Implement CSS3 style for drag and drop angularjs after click a button 【发布时间】：2017-02-03 08:59:36 【问题描述】：

我在我的项目中做了一个 Angularjs 拖放方法。我在拖放方面没有任何问题，但是在采取下一步行动后，我遇到了如何为可拖动元素制作样式的问题。

就我而言，如果用户将 鹅 和 兔子 拖到标有 分娩的动物 的框内，用户将点击按钮 检查答案。每个可拖动的 div 上方都会有 Correct 或 Wrong 符号。

我尝试检查元素，但我只看到了这些样式：

[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>

【问题讨论】：

【参考方案1】：
    在原始数据中添加了信息 - 每个对象的好箱在哪里。 一旦放置 - 检查是否放置在正确的盒子中，并为放置的项目添加好/坏类名。 点击check answer - 添加/删除body 元素上的reveal 类，添加后 - 使用css和#2中的值 - 框具有相关颜色（绿色/红色）。

您可以使用此示例在放置的框中添加一些其他 html (V/X)。

这里是工作的 sn-p：

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>

【讨论】：

感谢您的回答【参考方案2】：

您只需在检查答案函数中添加一些逻辑，该函数实际上检查答案并分配一个布尔值：（在我的示例中，我只是在真假之间交替）

var i = 0;
$scope.checkAnswer = function() 
  $scope.droppedObjects1.concat($scope.droppedObjects2).forEach(function(x) 
    x.correct = (i++ %2) === 0;
  );

然后使用这个“正确”字段来应用适当的类：

ng-class=" correct: obj.correct === true, wrong: obj.correct === false "

然后设置两个类的样式：

.correct .wrong  
    position: relative;

.correct:before, .wrong:before 
    display:inline-block;
    padding:0 6px 0 0;
    position: absolute;
    top:-20px;
    right:-15px;
    font-size:30px;

.correct:before 
    content:'\2713';
    color:green;

.wrong:before 
    content:'x';
    color:red;



var myApp = angular.module('MyApp',['ngDraggable']).controller('MyCtrl',function($scope)
  
var i = 0;
$scope.checkAnswer = function() 
  $scope.droppedObjects1.concat($scope.droppedObjects2).forEach(function(x) 
    x.correct = (i++ %2) === 0;
  );


$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;


.correct .wrong  
    position: relative;

.correct:before, .wrong:before 
    display:inline-block;
    padding:0 6px 0 0;
    position: absolute;
    top:-20px;
    right:-15px;
    font-size:30px;

.correct:before 
    content:'\2713';
    color:green;

.wrong:before 
    content:'x';
    color:red;

<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"
                 ng-class=" correct: obj.correct === true, wrong: obj.correct === false ">
                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"
                 ng-class=" correct: obj.correct === true, wrong: obj.correct === false ">
                obj.name
            </div>
        </div>
    </div>
</div>
  <div style="text-align:center">
      <button ng-click="checkAnswer()">Check Answer</button>
  </div>
  </div>

【讨论】：

那个错误我可以用另一种逻辑来解决。 @lamelemon，决定哪些答案是正确的业务逻辑取决于 OP 自己决定。

以上是关于单击按钮后为拖放 angularjs 实现 CSS3 样式的主要内容，如果未能解决你的问题，请参考以下文章

Angular js/MVC 中的文件拖放功能不起作用

Mudblazor - 在拖放区域内单击

管理员单击按钮后为所有用户启动倒数计时器（react、redux、socket.io）

原生拖拽,拖放事件(drag and drop)

单击按钮退出框架时删除拖放对象

原生拖拽,拖放事件(drag and drop)