首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angularjs中拖动特定div on ng repeat

在AngularJS中实现拖动特定div元素的方法如下:

  1. 首先,确保你已经引入了AngularJS库,并在HTML文件中声明了ng-app指令。
  2. 创建一个AngularJS控制器,并在控制器中定义一个数组,用于存储需要拖动的div元素的数据。
代码语言:javascript
复制
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.divs = [
    { id: 1, name: 'Div 1' },
    { id: 2, name: 'Div 2' },
    { id: 3, name: 'Div 3' }
  ];
});
  1. 在HTML文件中,使用ng-repeat指令循环遍历divs数组,并为每个div元素绑定ng-draggable指令。
代码语言:html
复制
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="div in divs" ng-draggable>{{div.name}}</div>
</div>
  1. 创建一个自定义指令ngDraggable,用于实现拖动功能。在指令的link函数中,使用jQuery UI的draggable方法使div元素可拖动。
代码语言:javascript
复制
app.directive('ngDraggable', function() {
  return {
    link: function(scope, element) {
      element.draggable({
        containment: 'parent',
        cursor: 'move',
        revert: true
      });
    }
  };
});

以上代码中,使用了jQuery UI的draggable方法实现了拖动功能。通过设置containment属性为'parent',使得div元素只能在其父元素内拖动。cursor属性设置鼠标样式为'move',revert属性设置拖动结束后元素返回原位置。

这样,你就可以在AngularJS中实现拖动特定div元素的功能了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)

  • 腾讯云云服务器(CVM):提供可扩展的云服务器,适用于各种规模的应用程序和业务场景。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全可靠、高扩展性的云端存储服务,适用于存储和处理各种类型的数据。详情请参考:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angularjs基础(二)

一个网页可以包含多个运行在不同元素AngularJS 应用程序。 数据绑定     上面实例的{{firstName}}表达式是一个AngularJS数据的绑定的表达式。     ...AngularJS的数据绑定,同步了AngularJS表达式月AngularJS数据       {{firstName}} 是通过ng-model="firstNmae"进行同步。     ...">               总价:{{quantity * price}}            重复HTML元素     ng-repeat...    ng-repeat指令对于集合(数组)的每个项会克隆一次HTML元素 创建自定义的指令     除了AngularJS内置的指令外,我们还可以创建自定义指令。     ...-- 指令: runoob-directive--> 限制使用     你可以限制你的指令只能通过特定的方式来调用。

3.5K60
  • 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    上面的做法有一个潜在的问题,只有当用户在文档框输入值的时候我们才会去计算,还有更多的输入框,每一个输入框都要绑定。 $scope....2.7、ng-repeat迭代 ngRepeat指令为集合的每项实例化一个模板。每个模板的实例拥有自己的域,使用循环变量指向当前集合项上,$index指向当前项的索引或键值。...ng-repeat-start 指令工作方法类似ng-repeat,但是会重复从标签定义本身位置开始到ng-repeat-end定义位置之间的所有HTML代码。...{{ item }} Footer {{ item }} 如果上面例子的items变量的值为['A...,建议在视图的每一块功能区域创建一个控制器,MenuController、PathController 可以嵌套控制器,适OO的继承特性 示例代码: <!

    12.6K30
    领券