使用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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
JS将unicode码转中文方法
May 08 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
js中的闭包实例展示
Nov 01 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
vue.js实现照片放大功能
Jun 23 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
python中pycurl库的用法实例
2014/09/30 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python3实现Web网页图片下载
2016/01/28 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
使用python实现接口的方法
2017/07/07 Python
python机器学习实战之K均值聚类
2017/12/20 Python
总结python中pass的作用
2019/02/27 Python
详解python数据结构和算法
2019/04/18 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
留学推荐信怎么写
2014/01/25 职场文书
技术经济专业求职信
2014/09/03 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
2019入党申请书格式
2019/06/25 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL