<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1{

    width: 100px;height: 100px;background: red;position: absolute;

}

</style>

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script src="angular.min.js"></script>

<script>

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){

}]);

m1.directive('myDrag',function (){

    return {

        restrict:'A',

        link:function(scope,element,attr){

            var disX = 0;

            var disY = 0;

            attr.myDrag = angular.equals(attr.myDrag,'true');

            element.on('mousedown',function (ev){

                var This = this;

                disX = ev.pageX - $(this).offset().left;

                disY = ev.pageY - $(this).offset().top;

                if(attr.myDrag){

                    var $line = $('<div>');

                    $line.css({width:$(this).outerWidth(),height:$(this).outerHeight(),border:'1px gray dotted',position:'absolute',left:$(this).offset().left,top:$(this).offset.top,position:'absolute'});

                    $('body').append($line);

                }

                $(document).on('mousemove',function(ev){

                    if(attr.myDrag){

                        $line.css('left',ev.pageX - disX);

                        $line.css('top',ev.pageY - disY);

                    }else{

                        $(This).css('left',ev.pageX - disX);

                        $(This).css('top',ev.pageY - disY);

                    }

                });

                $(document).on('mouseup',function(){

                    $(document).off();

                    if(attr.myDrag){

                        $(This).css('left',$line.offset().left);

                        $(This).css('top',$line.offset().top);

                        $line.remove();

                    }

                })

                return false;

            })

        }

    }

})

</script>

</head>

<body ng-controller="Aaa">

    <div id="div1" my-drag='true'></div>

</body>

</html>

Angular 学习笔记——拖拽的更多相关文章

  1. jquery UI 跟随学习笔记——拖拽（Draggable）

    引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Dragg ...

  2. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  3. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  4. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  5. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  6. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  7. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  8. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

随机推荐

  1. linux之expr命令

    expr命令可以实现数值运算.数值或字符串比较.字符串匹配.字符串提取.字符串长度计算等功能.它还具有几个特殊功能,判断变量或参数是否为整数.是否为空.是否为0等. 先看expr命令的info文档in ...

  2. 小Z爱序列(NOIP信（sang）心（bin）赛)From FallDream（粗制单调队列&单调栈的算法解析）

    原题: 小Z最擅长解决序列问题啦,什么最长公共上升然后下降然后上升的子序列,小Z都是轻松解决的呢. 但是小Z不擅长出序列问题啊,所以它给了你一道签到题. 给定一个n个数的序列ai,你要求出满足下述条件 ...

  3. 基于UDP高性能传输协议UDT doc翻译(一)

    原文转自:http://hi.baidu.com/doodlezone/item/74a203155efe26dbbf9042dd                  UDT文档阅读理解 一.  概述 ...

  4. 使用MyQR生成二维码

    from MyQR import myqr # 主要用到以下几个参数 # words:文本,可以是一个链接,或者你想说的话 # picture:你用到的图片,作为背景,不然只是一个光秃秃的二维码 # ...

  5. The Problem to Slow Down You(Palindromic Tree)

    题目链接:http://codeforces.com/gym/100548 今天晚上突然有了些兴致去学习一下数据结构,然后就各种无意中看到了Palindrome Tree的数据结构,据说是2014年新 ...

  6. Selenium2+python自动化7-xpath定位【转载】

    前言 在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. ...

  7. 使用overtrue/socialite实现第三方登陆

    composer下载包 将申请的配置内容放在.ENV文件中 在services.php文件中引用 控制器 其他第三方登陆同理,拿到client_id,client_secret 和redirect_u ...

  8. CF988 C. Equal Sums【map+pair/hash/任选两个序列，两个序列都除去他们中的一个数，使的总和相同】

    [链接]:CF988C [题意]:在n个序列中任选两个序列,两个序列都除去他们中的一个数,使的总和相同 [分析]:map<int,pair<int,int> > mp,从0~m ...

  9. 51nod 1096 距离之和最小【中位数】

    1096 距离之和最小 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 X轴上有N个点,求X轴上一点使它到这N个点的距离之和最小,输出这个最小的距离 ...

  10. HDU 1863 畅通工程 最小生成树

    思路: 比较典型的最小生成树的题目了..在这里用求最小生成树的经典算法K(Kruskal)算法和P(Prim)算法.我的 K 算法用的是结构体来存图,P 算法用的是邻接矩阵来存图,K算法的复杂度是O( ...