那些遇到过的问题

使用角度js单击另一个div后,Div移动

Ner*_*ere 6 javascript html5 css3 angularjs

我为我的项目实现了DRAG和DROP Angularjs,以便将DIV从一个位置移动到另一个位置,以便让用户能够对项目进行分类.我只需要满足我的简单要求:

Step 1: User click at division (1) 
Step 2: User click at division (2)
Run Code Online (Sandbox Code Playgroud)

将采取以下 步骤:一旦用户进入 步骤(2),Goose将移至STEP (2).如果用户再次点击Goose在STEP(2)那么它会回去STEP(1).

我怎么能这样做？

正如您可以看到我的预期输出:

在此输入图像描述

我目前的代码到目前为止:

var myApp = angular.module('MyApp',['ngDraggable']).controller('MyCtrl',function($scope){
  
    $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);
    };
});
Run Code Online (Sandbox Code Playgroud) 
.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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-click="clickMe()"  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>
Run Code Online (Sandbox Code Playgroud)

Ste*_*ele 4

我改变了你的代码来实现这一点。首先，您尚未检查 drop 事件处理程序上是否有对象，并且如果您单击某个元素，则会触发 drop 事件。一定是拖放库中的错误。\n然后我在元素上添加了单击处理程序，用于将给定引用保存在 中，$scope.activeElement并将其容器引用保存在 中containerOfActiveElement。容器上还有单击处理程序，用于从容器数组中添加和删除活动元素。

\n\n

模板和 CSS 中还有一些代码用于在活动元素上设置红色背景。它还添加了一个过渡，与 angles 结合$timeout，使动画发生。

\n\n

你有很多重复的代码。您可以像我一样通过传递数组引用来改进这一点。

\n\n

\r\n
\r\n
var myApp = angular.module(\'MyApp\', [\'ngDraggable\']).controller(\'MyCtrl\',function($scope, $timeout){\r\n\r\n$scope.activeElement;\r\nvar containerOfActiveElement;\r\nvar activeHTMLElement;\r\nvar getCenterOfELement = function (htmlElement) {\r\n  var rect = htmlElement.getBoundingClientRect(); \r\n  return {\r\n    x: rect.left + rect.width / 2,\r\n    y: rect.top + rect.height / 2\r\n  }\r\n};\r\n$scope.onElementClick = function(event, data, container) {\r\n  if (!angular.equals(data, $scope.activeElement)) {\r\n    event.stopPropagation(); // you need this for not firing event on container\r\n    $scope.activeElement = data;\r\n    containerOfActiveElement = container;\r\n    activeHTMLElement = event.target;\r\n  } else \r\n    $scope.activeElement = null;\r\n};\r\n$scope.onTargetClick = function(container, event) {\r\n  if ($scope.activeElement) {\r\n    var activeCenter = getCenterOfELement(activeHTMLElement);\r\n    var targetCenter = getCenterOfELement(event.target);\r\n    var offsetX = targetCenter.x - activeCenter.x;\r\n    var offsetY = targetCenter.y - activeCenter.y;\r\n    activeHTMLElement.style.transform= \'translate(\'+offsetX+\'px,\'+offsetY+\'px)\';\r\n    $timeout(function() {\r\n        container.push($scope.activeElement);\r\n        var index = containerOfActiveElement.indexOf($scope.activeElement);\r\n        containerOfActiveElement.splice(index, 1);\r\n        $scope.activeElement = null;\r\n        containerOfActiveElement = null; \r\n        activeHTMLElement = null;\r\n    }, 200);\r\n  }\r\n};\r\n  \r\n$scope.centerAnchor = true;\r\n$scope.toggleCenterAnchor = function () {\r\n    $scope.centerAnchor = !$scope.centerAnchor\r\n};\r\n\r\n/* can be removed, since it has no effect:\r\nvar onDraggableEvent = function (evt, data) {\r\n    console.log("128", "onDraggableEvent", evt, data);\r\n};\r\n$scope.$on(\'draggable:start\', onDraggableEvent);\r\n$scope.$on(\'draggable:end\', onDraggableEvent);\r\n*/\r\n  \r\n$scope.droppedObjects0 = [{name:\'Goose\'},{name:\'Rabbit\'},{name:\'Chick\'},{name:\'Cat\'}];\r\n$scope.droppedObjects1 = []; //Answer: Cat + Rabbit\r\n$scope.droppedObjects2 = []; //Answer: Chicken + Goose\r\n\r\n\r\n$scope.AnswerOject1 = [{name:\'Arnab\'},{name:\'Kucing\'}];\r\n$scope.AnswerOject2 = [{name:\'Angsa\'},{name:\'Ayam\'}];\r\n\r\n$scope.onDropComplete0 = function (data, evt) {\r\n    console.log("127", "$scope", "onDropComplete0", data, evt);\r\n    var index = $scope.droppedObjects0.indexOf(data);\r\n    if (index == -1 && data !== null) // gave unwanted result if data was null (new empty object)\r\n        $scope.droppedObjects0.push(data);\r\n};\r\n$scope.onDropComplete1 = function (data, evt) {\r\n    console.log("127", "$scope", "onDropComplete1", data, evt);\r\n    var index = $scope.droppedObjects0.indexOf(data);\r\n    if (index == -1 && data !== null)\r\n        $scope.droppedObjects1.push(data);\r\n};\r\n$scope.onDragSuccess0 = function (data, evt) {\r\n    console.log("133", "$scope", "onDragSuccess0", "", evt);\r\n    var index = $scope.droppedObjects0.indexOf(data);\r\n    if (index > -1 && data) {\r\n        $scope.droppedObjects0.splice(index, 1);\r\n    }\r\n};\r\n$scope.onDragSuccess1 = function (data, evt) {\r\n    console.log("133", "$scope", "onDragSuccess1", "", evt);\r\n    var index = $scope.droppedObjects1.indexOf(data);\r\n    if (index > -1) {\r\n        $scope.droppedObjects1.splice(index, 1);\r\n    }\r\n};\r\n$scope.onDragSuccess2 = function (data, evt) {\r\n    var index = $scope.droppedObjects2.indexOf(data);\r\n    if (index > -1) {\r\n        $scope.droppedObjects2.splice(index, 1);\r\n    }\r\n};\r\n$scope.onDropComplete2 = function (data, evt) {\r\n    var index = $scope.droppedObjects2.indexOf(data);\r\n    if (index == -1 && data !== null) {\r\n        $scope.droppedObjects2.push(data);\r\n    }\r\n};\r\nvar inArray = function (array, obj) {\r\n    var index = array.indexOf(obj);\r\n};\r\n$scope.logResults = function() {\r\n     console.log({\r\n        \'div1\': $scope.droppedObjects0,\r\n        \'div2\': $scope.droppedObjects1,\r\n        \'div3\': $scope.droppedObjects2\r\n     });\r\n}\r\n});
Run Code Online (Sandbox Code Playgroud)\r\n
.body\r\n{\r\n    width:500px;\r\n    margin-left:auto; \r\n    margin-right:auto;\r\n}\r\n\r\n[ng-drag] {\r\n    -moz-user-select: -moz-none;\r\n    -khtml-user-select: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\r\n}\r\n\r\n[ng-drag] {\r\n    width: 50px;\r\n    height: 50px;\r\n    background: rgba(255, 255, 255, 0.5);\r\n    color: #131313;\r\n    text-align: center;\r\n    padding-top: 12px;\r\n    display: inline-block;\r\n    margin: 5px 5px;\r\n    cursor: move;\r\n    border: 1px solid #ccc;\r\n    border-radius: 4px;\r\n}\r\n\r\nul.draggable-objects:after {\r\n    display: block;\r\n    content: "";\r\n    clear: both;\r\n}\r\n\r\n.draggable-objects li {\r\n    float: left;\r\n    display: block;\r\n    width: 50px;\r\n    height: 50px;\r\n    margin:2px;\r\n}\r\n\r\n[ng-drag].drag-over {\r\n    border: solid 1px red;\r\n}\r\n\r\n[ng-drag].dragging {\r\n    opacity: 0.5;\r\n}\r\n\r\n[ng-drop] {\r\n    background: rgba(198, 255, 198, 0.5);\r\n    text-align: center;\r\n    height: 150px;\r\n    padding-top: 10px;\r\n    display: block;\r\n    margin: 20px auto;\r\n    position: relative;\r\n    border: 1px solid #c3c3c3;\r\n    border-radius: 8px;\r\n}\r\n\r\n[ng-drop].drag-enter {\r\n    border: solid 5px red;\r\n}\r\n\r\n[ng-drop] span.title {\r\n    display: block;\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 200px;\r\n    height: 20px;\r\n    margin-left: -100px;\r\n    margin-top: -10px;\r\n}\r\n\r\n[ng-drop] div {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n.list-of-drag-item\r\n{\r\n    height: 83px;\r\n    background-color: #f7f7f7;\r\n}\r\n\r\n.active {\r\n    background-color: red;\r\n    color: white;\r\n    transition: transform .2s ease-in-out;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"/>\r\n   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>\r\n   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>\r\n   <script src="https://cdnjs.cloudflare.com/ajax/libs/ngDraggable/0.1.10/ngDraggable.js"></script>\r\n\r\n<div ng-app="MyApp" ng-controller="MyCtrl" class="body">\r\n    Categorize the animals based on their reproductive system\r\n<div class="row">\r\n<div class="col">\r\n    <div class="list-of-drag-item" ng-drop="true" ng-drop-success="onDropComplete0($data,$event)" ng-click="onTargetClick(droppedObjects0, $event)">\r\n        <div ng-click="onElementClick($event, obj, droppedObjects0)"  ng-repeat="obj in droppedObjects0" ng-drag="true" ng-drag-data="obj"\r\n            ng-drag-success="onDragSuccess0($data,$event)" ng-center-anchor="{{centerAnchor}}" ng-class="{active: activeElement.name === obj.name}">\r\n           {{obj.name}}\r\n        </div>\r\n    </div>\r\n</div>\r\n</div>\r\n<div class="row" style="text-align: center;">\r\n<div class="col div-left">\r\n    <span class="title">Animals that give birth\r\n    <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)" ng-click="onTargetClick(droppedObjects1, $event)">\r\n        <div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}" ng-click="onElementClick($event, obj, droppedObjects1)" ng-class="{active: activeElement.name === obj.name}">\r\n            {{obj.name}}\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class="col div-right">\r\n    <span class="title">Animals that Laying Eggs</span>\r\n    <div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)" ng-click="onTargetClick(droppedObjects2, $event)">\r\n        <div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"\r\n             ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}" ng-click="onElementClick($event, obj, droppedObjects2)" ng-class="{active: activeElement.name === obj.name}">\r\n            {{obj.name}}\r\n        </div>\r\n    </div>\r\n</div>\r\n</div>\r\n   <button ng-click="logResults()">log results</button>\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

1131 次

最近记录：

9 年，2 月 前
相关归档
.keyCode vs. .which 218
VueJs 2.0将大孩子的事件发送到他的祖父组件 57
如何在JavaScript中反转正则表达式？ 44
IE localStorage事件失败了 12
语义标记:为什么<header>而不是<div id ="header">？ 6
在演示文稿中包含交互式本地R. 6
通过CSS更改光标:悬停.无需鼠标移动即可从DOM中删除元素.更新鼠标光标？ 6
如何使用CSS在HTML中设置外部SVG颜色？ 6
如何在图像旁边放置文本(html)？ 5
输入字段上的自动聚焦属性在IE 11中不起作用 5
难疑归档
如何撤消Git中最近的提交？ 20327
如何解决"断点当前不会被命中.此文档没有加载任何符号." 警告？ 1456
确定整数平方根是否为整数的最快方法 1403
如何将字节数组转换为十六进制字符串,反之亦然？ 1313
你如何存放未跟踪的文件？ 1287
如何在正则表达式中使用变量？ 1250
在Python中检查类型的规范方法是什么？ 1171
检查是否使用jQuery选中了复选框 1122
Django会扩展吗？ 1101
我怎么知道分支是否已经合并为主分支？ 1077