javascript - 使用angular js点击另一个div后Div移动-6ren

javascript - 使用angular js点击另一个div后Div移动

转载作者：太空狗更新时间：2023-10-29 15:07:36

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

Step 1: User click at division (1) 
Step 2: User click at division (2)

过程将采取:一旦用户进入STEP(2)，Goose 将移动到STEP (2)。如果用户在 STEP(2) 中再次点击 Goose，它将返回到 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);
    };
});

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

最佳答案

我更改了您的代码以实现此目的。首先，您还没有检查 drop 事件处理程序上是否有对象，如果您只是单击一个元素，drop 事件就会被触发。一定是拖放库中的错误。然后，我在元素上添加了点击处理程序，用于在 $scope.activeElement 中保存给定引用，并在 containerOfActiveElement 中保存它们的容器引用。容器上还有用于在容器数组中添加和移除事件元素的点击处理程序。

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

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

var myApp = angular.module('MyApp', ['ngDraggable']).controller('MyCtrl',function($scope, $timeout){

$scope.activeElement;
var containerOfActiveElement;
var activeHTMLElement;
var getCenterOfELement = function (htmlElement) {
  var rect = htmlElement.getBoundingClientRect(); 
  return {
    x: rect.left + rect.width / 2,
    y: rect.top + rect.height / 2
  }
};
$scope.onElementClick = function(event, data, container) {
  if (!angular.equals(data, $scope.activeElement)) {
    event.stopPropagation(); // you need this for not firing event on container
    $scope.activeElement = data;
    containerOfActiveElement = container;
    activeHTMLElement = event.target;
  } else 
    $scope.activeElement = null;
};
$scope.onTargetClick = function(container, event) {
  if ($scope.activeElement) {
    var activeCenter = getCenterOfELement(activeHTMLElement);
    var targetCenter = getCenterOfELement(event.target);
    var offsetX = targetCenter.x - activeCenter.x;
    var offsetY = targetCenter.y - activeCenter.y;
    activeHTMLElement.style.transform= 'translate('+offsetX+'px,'+offsetY+'px)';
    $timeout(function() {
        container.push($scope.activeElement);
        var index = containerOfActiveElement.indexOf($scope.activeElement);
        containerOfActiveElement.splice(index, 1);
        $scope.activeElement = null;
        containerOfActiveElement = null; 
        activeHTMLElement = null;
    }, 200);
  }
};
  
$scope.centerAnchor = true;
$scope.toggleCenterAnchor = function () {
    $scope.centerAnchor = !$scope.centerAnchor
};

/* can be removed, since it has no effect:
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 && data !== null) // gave unwanted result if data was null (new empty object)
        $scope.droppedObjects0.push(data);
};
$scope.onDropComplete1 = function (data, evt) {
    console.log("127", "$scope", "onDropComplete1", data, evt);
    var index = $scope.droppedObjects0.indexOf(data);
    if (index == -1 && data !== null)
        $scope.droppedObjects1.push(data);
};
$scope.onDragSuccess0 = function (data, evt) {
    console.log("133", "$scope", "onDragSuccess0", "", evt);
    var index = $scope.droppedObjects0.indexOf(data);
    if (index > -1 && data) {
        $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 && data !== null) {
        $scope.droppedObjects2.push(data);
    }
};
var inArray = function (array, obj) {
    var index = array.indexOf(obj);
};
$scope.logResults = function() {
     console.log({
        'div1': $scope.droppedObjects0,
        'div2': $scope.droppedObjects1,
        'div3': $scope.droppedObjects2
     });
}
});

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

.active {
    background-color: red;
    color: white;
    transition: transform .2s ease-in-out;
}

<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"/>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.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)" ng-click="onTargetClick(droppedObjects0, $event)">
        <div ng-click="onElementClick($event, obj, droppedObjects0)"  ng-repeat="obj in droppedObjects0" ng-drag="true" ng-drag-data="obj"
            ng-drag-success="onDragSuccess0($data,$event)" ng-center-anchor="{{centerAnchor}}" ng-class="{active: activeElement.name === obj.name}">
           {{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)" ng-click="onTargetClick(droppedObjects1, $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-click="onElementClick($event, obj, droppedObjects1)" ng-class="{active: activeElement.name === obj.name}">
            {{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)" ng-click="onTargetClick(droppedObjects2, $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-click="onElementClick($event, obj, droppedObjects2)" ng-class="{active: activeElement.name === obj.name}">
            {{obj.name}}
        </div>
    </div>
</div>
</div>
   <button ng-click="logResults()">log results</button>
</div>

关于javascript - 使用angular js点击另一个div后Div移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39767151/

文章推荐： java - 使用 GWT 将 JSON 转换为 Hashmap

javascript - 点击 child 不会触发 parent 点击
当点击content 时，我想触发我的alert。我的 content 中可以有任意数量的子元素，所以我不想对每个元素都进行硬编码。我想也许我可以监听对该父元素的点击，然后每次点击子元素都会触发我的操
objective-c - 检测 Cocoa 应用程序中的用户事件(点击、点击……)
对于 Mac 应用程序，我想检测应用程序中的用户事件，因此我可以定期让 Web 服务知道用户在端点上仍然处于事件状态。在 Cocoa Touch 中，我会覆盖 UIApplication 的 sen
Javascript-点击
第一次在这里发帖，但天知道我一直使用这个网站来搜索问题 :P 好吧，我现在遇到了自己的问题，我似乎无法轻松地在 Google 上搜索，在玩了大约 2 小时后，我终于决定发布一个问题，看看你们是怎么想的
AngularJS 点击 TouchStart
Angular 触控 ngTouch导致在触摸释放时发生点击。有没有办法让点击发生在触摸开始？ fast-click下面的指令似乎可以在触摸屏上执行我想要的操作，但它不适用于鼠标点击。 myApp.
Flutter - 点击/触摸区域如何工作？
1) 如果我有这个，当我点击子 Container 时它不会打印'tap': Container( color: Colors.red, child: GestureDetector(
jquery解除绑定(bind)点击
我简直要发疯了，只是想从 jQuery 中的事件中解除 onclick 处理程序的绑定(bind)，以便稍后可以将其绑定(bind)到另一个函数。我已将代码隔离在测试页中，因此除了核心之外什么都没有
jquery - 如何在jquery中触发Live()点击
我有一个有趣的情况。我需要触发实时点击，因为简单的点击不起作用。这就是我所拥有的: $('.text').trigger('click'); 但我需要这样的东西: $('.text').trigge
javascript - 点击 'Confirm'后没有出现警告窗口
这是我的作业，这是我第一次做表单验证。以下代码分别是我的HTML代码和JavaScript代码。 HTML 代码: First N
magento - 如何获取特定产品的浏览/点击
正如标题所示，如何获取 Magento 中特定产品的浏览量/点击量/展示次数。欢迎任何帮助。最佳答案这个简单的示例将为您提供在您指定的日期+其查看次数之间查看过的产品列表: $fromDate =
java - fragment 点击
我正在创建一个应用程序，但在其中遇到错误。我想在按钮上添加 OnclickListner。该按钮位于 fragment 类上。从这个 fragment 类我想继续另一个类。代码如下: fragment
点击 PHP "continue"
我在数组中有一些值。首先，我想在 View 中显示该数组的前两个值，接下来我想在某些按钮单击操作后显示剩余的值，并将数组索引增加 1。例如:一次点击显示第三个值，然后另一次点击显示第四个值。我怎样才
jquery - 如何查看CMD+点击
在下面的代码片段中，如果在链接上执行“CMD+CLICK”，则不会显示 alert('CMD')。这是为什么？我想在用户按下 CMD 按钮(或 Windows 上的 CTRL 键)+单击 href
javascript - 点击()开始加载
我希望在单击链接时开始加载一些内容。在单击该链接之前，我不希望它使用任何带宽。另外如何实现几乎所有灯箱中都能看到的旋转光标动画？最佳答案使用$.ajax()函数动态加载内容。对于动画，请找到一个
javascript - 点击 'a'打开两个链接
我有如下的 DOM: users 当用户点击按钮时，它会将新的“td”附加到“tr”。它运作良好。问题:单击“a”我想打开两个链接。最好的方法是首先将当前页面重定向到另一个页面，然后
javascript - 显示数组项一次(点击)
这是我正在尝试做的.. 点击按钮会显示一个随机数组项。数组项只能显示一次。目前我已经将代码设置为: 点击随机数组项显示。按钮点击继续循环，没有结束。按钮点击多次显示元素。这是代码的链接 ht
C# 编程鼠标移动/点击
我想创建...基本上是一个宏程序。点击记录后，它会记录所有鼠标(可能最终是键盘)事件。然后你可以保存，然后播放，鼠标应该移动并点击在相同的地方当你录制它时它会发生。我知道如何获取全局鼠标事件，但我不
android - ListView 点击？
我有一个关于将 onClick 添加到 ListView 的问题，我已经尝试尽可能多地遵循 Android NotePad 教程，但是对于我的布局我不太明白如何添加它。这是 Activity 类，它
javascript - 点击/点击不适用于触摸屏
我正在使用一个网站以表格的形式显示信息。用户可以单击表格中的行来更改它们的颜色，我还有一个按钮允许用户暂停页面的刷新，这样就不会添加新信息。这两个功能都适用于桌面，但不适用于触摸屏。我的第一个想法是触
javascript - 点击标签时的事件顺序
所以我的网站上有一个正常的链接，我想为它添加跟踪。我可以设想很多方法来做到这一点，但我已经确定通过编写一个小的 jquery 函数并在我的标签中放置一个小片段来实现这一点非常简单: click me!
Android - ImageButton 点击
我正在尝试使我的图片按钮看起来不错。我尝试了几种不同的方法，但它们看起来都不对。这是一个圆形图像，我想让它看起来像是可以按下的。这是我到目前为止所得到的。 android:textAppearance

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用angular js点击另一个div后Div移动