编程 Javascript

使用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帮你实现拖拽的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery validate 中文API 附validate.js中文api手册

Jul 31 Javascript

Jquery 点击按钮显示和隐藏层的代码

Jul 25 Javascript

jquery select动态加载选择(兼容各种浏览器)

Feb 01 Javascript

js 输出内容到新窗口具体实现代码

May 31 Javascript

JS自动适应的图片弹窗实例

Jun 29 Javascript

javascript的事件触发器介绍的实现

Jun 05 Javascript

总结AngularJS开发者最常犯的十个错误

Aug 31 Javascript

Vue.js快速入门教程

Sep 07 Javascript

网页瀑布流布局jQuery实现代码

Oct 21 Javascript

Vue列表页渲染优化详解

Jul 24 Javascript

vue 过滤器filter实例详解

Mar 14 Javascript

Vue将页面导出为图片或者PDF

Aug 17 Javascript

使用JavaScript根据图片获取条形码的方法

Jul 04 #Javascript

jquery拖动改变div大小

Jul 04 #jQuery

JavaScript无操作后屏保功能的实现方法

Jul 04 #Javascript

JS中type="button"和type="submit"的区别

Jul 04 #Javascript

5分钟打造简易高效的webpack常用配置

Jul 04 #Javascript

AngularJS实现表格的增删改查（仅限前端）

Jul 04 #Javascript

js CSS3实现卡牌旋转切换效果

Jul 04 #Javascript