自己收藏，使用angualrjs的directive些的鼠标拖动DOM....

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>鼠标拖动div</title>

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script>

        (function(){

           angular.module('app',[])

           .directive('ngDirective', ['$document', function($document){

               return {

                   link: function link(scope, element, attrs){

                       var startX = 0, startY = 0, x = 0, y = 0;

                        element.css({

                            position: 'relative',

                            border: '1px solid red',

                            backgroundColor: '#ccc',

                            cursor: 'pointer',

                            width:'100px',

                            height:'100px'

                        });

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

                            event.preventDefault();

                             startX = event.pageX - x;

                             startY = event.pageY - y;

                             $document.on('mousemove', mousemove);

                             $document.on('mouseup', mouseup);

                        });

                        function mousemove(event) {

                            y = event.pageY - startY;

                            x = event.pageX - startX;

                             element.css({

                                 top: y + 'px',

                                 left: x + 'px'

                            });

                         };

                         function mouseup() {

                             $document.off('mousemove', mousemove);

                             $document.off('mouseup', mouseup);

                         }

                   }

               }

            }])

        })()

    </script>

</head>

<body ng-app="app">

    <div ng-directive>DONE</div>

</body>

</html>

鼠标拖动DOM的更多相关文章

  1. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  2. echats 油表盘 鼠标拖动指针改变数值

    近期需要做一个鼠标拖动完成油表盘数值改变的功能,使用canvas感觉太麻烦,而且指针不太好监听和拖动,只能另谋出路,在网上参考了某位大神的操作,最终选择了echats来解决这个问题.废话不多说,直接上 ...

  3. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

  4. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  5. 实现鼠标拖动canvas绘制的图片

    不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  6. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  7. Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）

    日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...

  8. listbox鼠标拖动数据和为button注册快捷键

    将listbox1中的数据用鼠标拖动至listbox2,即有左至右. 分别对应控件注册如下事件DragEnter,MouseDown,DragDrop 代码如下: //P128 DataGridVie ...

  9. c# 利用 两个TREEVIEW控件完成TEENODE的鼠标拖动操作

    功能说明: 我们有两个TREEVIEW控件——TREEVIEW1,TREEVIEW2.Treeview1内有三个NODE,Treeview2内有三个NODE.将Treeview1内的NODE拖动到Tr ...

随机推荐

  1. 对称密码——DES加密算法

    前言 本篇博文将介绍对称密码算法中的DES密码的算法原理与代码实现(Java) DES算法原理 DES加密算法是对称加密算法(加密和解密使用同一个密钥)中的一种,DES也是分组密码,以64位为分组对明 ...

  2. Python 里的「单分派泛函数」到底是什么？

    泛型,如果你学过Java ,应该对它不陌生吧.但你可能不知道在 Python 中(3.4+ ),也可以实现简单的泛型函数. 在Python中只能实现基于单个(第一个)参数的数据类型来选择具体的实现方式 ...

  3. 卷积神经网络CNN

    卷积神经网络,在图像识别和自然语言处理中有很大的作用,讲cnn的中文博客也不少,但是个人感觉说的脉络清晰清晰易懂的不多. 无意中看到这篇博客,写的很好,图文并茂.建议英文好的直接去看原文.英文不好的就 ...

  4. C#创建IIS站点及相应的应用程序池，支持IIS6.0+Windows Server 2003. 使用Builder设计模式

    测试项目结构: PS:IIS6UtilsBuilder, IIS7UtilsBuilder,IISUtilsBuilder以及IISDirector为Builder设计模式实现的核心代码.Progra ...

  5. Java 项目中一种简单的动态修改配置即时生效的方式 WatchService

    这种方式仅适合于比较小的项目,例如只有一两台服务器,而且配置文件是可以直接修改的.例如 Spring mvc 以 war 包的形式部署,可以直接修改resources 中的配置文件.如果是 Sprin ...

  6. 简简单单的Vue2（简单语法，生命周期，组件）

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊 ...

  7. 基础知识：语言、编程、计算机组成、cpu、存储器

    2019年3月18日一.    语言:一种事物与另外一种事物沟通的介质.              编程语言:程序员与计算机沟通的介质.    编程:把要让计算机做的事用一种编程语言表达出来.    ...

  8. jQuery(三)、属性、CSS

    jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...

  9. 一个简易的Python爬虫，将爬取到的数据写入txt文档中

    代码如下: import requests import re import os #url url = "http://wiki.akbfun48.com/index.php?title= ...

  10. noi.ac#309 Mas的童年(子集乱搞)

    题意 题目链接 Sol 记\(s_i\)表示前\(i\)个数的前缀异或和,我们每次相当于要找一个\(j\)满足\(0 < j < i\)且\((s_i \oplus s_j) + s_j\ ...