使用angular帮你实现拖拽的示例


Posted in Javascript onJuly 05, 2017

拖拽有多种写法,在这里就看一看angular版的拖拽。

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #box{
        width: 100px;
        height: 100px;
        background: black;
        /*一定要给当前元素设置绝对定位*/
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div id="box" my-drag></div>
  </body>
    <script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
//     自定义一个模块
      var app = angular.module("myApp",[]);
//     自定义指令 自定义指令时一定要使用驼峰命名法
      app.directive('myDrag',function(){
//       返回一个函数
        return{
          link : function(scope,element,attr){
//           scope可以接收到的数据
//           element 当前的元素
//           attr属性
 
//           拖拽的三大事件mousedown,mousemove,mouseup.使用jq绑定事件的方法进行绑定
            element.on('mousedown',function(ev){
//             通过event获取到当前对象
              var This = $(this);
//             获取到鼠标离当前元素上边框的距离
              var disX = ev.clientX - $(this).offset().left;
//             获取到元素距离左边框的距离 
//             因为在拖拽的过程中不变的是鼠标距离元素边框的距离 通过不变和已知求变量
              var disY = ev.clientY - $(this).offset().top;
              $(document).on('mousemove',function(ev){
//               将所改变的值通过样式设置给当前元素
                This.css({
                  left:ev.clientX - disX,
                  top:ev.clientY - disY,
                });
              });
              $(document).on('mouseup',function(){
//               鼠标松开时关闭所有事件
                $(document).off();
              })
            })
          },
          restrict:'A', //ECMA    E元素 C类名 M注释 A属性
        };
      });
    </script>
</html>

以上这篇使用angular帮你实现拖拽的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 #Javascript
jquery拖动改变div大小
Jul 04 #jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 #Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 #Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 #Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 #Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 #Javascript
You might like
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
带你认识Django
2019/01/15 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
python如何进入交互模式
2020/07/06 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
纠纷协议书
2014/04/16 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
北京英语导游词
2015/02/12 职场文书
2015年财政所工作总结
2015/04/25 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis