使用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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
使用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中Session和Cookie是如何操作的
2015/10/10 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
python小程序实现刷票功能详解
2019/07/17 Python
Python中函数的返回值示例浅析
2019/08/28 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
大学生开西餐厅创业计划书
2014/02/01 职场文书
汽车维修求职信
2014/06/15 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
科学育儿宣传标语
2014/10/08 职场文书
《比的意义》教学反思
2016/02/18 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python