使用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 相关文章推荐
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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实现的随机红包算法示例
2017/08/14 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
popdiv
2006/07/14 Javascript
js字符编码函数区别分析
2008/06/05 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python给图像添加噪声具体操作
2019/03/03 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
一名女生的自荐信
2013/12/08 职场文书
早会主持词
2014/03/17 职场文书
艺术节主持词
2014/04/02 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
小学教师年度个人总结
2015/02/05 职场文书
人力资源部岗位职责
2015/02/11 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书