鼠标拖动DOM
自己收藏，使用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的更多相关文章
- jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
- echats 油表盘 鼠标拖动指针改变数值
近期需要做一个鼠标拖动完成油表盘数值改变的功能,使用canvas感觉太麻烦,而且指针不太好监听和拖动,只能另谋出路,在网上参考了某位大神的操作,最终选择了echats来解决这个问题.废话不多说,直接上 ...
- CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果
CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- 实现鼠标拖动canvas绘制的图片
不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）
日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
- listbox鼠标拖动数据和为button注册快捷键
将listbox1中的数据用鼠标拖动至listbox2,即有左至右. 分别对应控件注册如下事件DragEnter,MouseDown,DragDrop 代码如下: //P128 DataGridVie ...
- c# 利用 两个TREEVIEW控件完成TEENODE的鼠标拖动操作
功能说明: 我们有两个TREEVIEW控件——TREEVIEW1,TREEVIEW2.Treeview1内有三个NODE,Treeview2内有三个NODE.将Treeview1内的NODE拖动到Tr ...
随机推荐
- 痞子衡嵌入式：高性能MCU之Media应用开发那些事 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是高性能MCU之Media应用开发相关知识. 飞思卡尔半导体(现恩智浦半导体)2017年推出的i.MX RT系列第一款芯片i.MXRT1 ...
- 玩转Spring Cloud之配置中心（config server &config client）
本文内容导航: 一.搭建配置服务中心(config server) 1.1.git方式 1.2.svn方式 1.3.本地文件方式 1.4.解决配置中包含中文内容返回乱码问题 二.搭建配置消费客户端( ...
- CAD.NET二次开发 新建图层 删除图层 指定图层颜色以及线形等
基于浩辰CAD 2019测试 功能实现 直接上代码: [CommandMethod("CreateAndAssignAlayer")] //新建图层 然后添加到图层表里 publi ...
- Unable to execute 'doFinal' with cipher instance [javax.crypto.Cipher@4e025e0a]
org.apache.shiro.crypto.CryptoException: Unable to execute 'doFinal' with cipher instance [javax.cry ...
- winform 跨线程访问问题
一.问题描述 进行winform 开发我们在进行数据交换时避免不了使用多线程或异步方法,这样操作也将避免不了跨线程对控件进行操作(赋值.修改属性). 下面通过一个测试说明一下问题 点击一个按钮异步对t ...
- 008. 阻塞&非阻塞、同步&异步
阻塞 非阻塞:关注的对象是调用者: 阻塞:调用者发起调用后,处于等待状态,直到该调用有返回: 非阻塞:调用者发起调用后,不需要等待返回,可以往下执行: 同步 异步: 关注的对象是被调用者: 同步:服 ...
- H5、C3、ES6的新特性
H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...
- OpenCL中三种内存创建image的效率对比
第一种:使用ION: cl_mem_ion_host_ptr ion_host_ptr1; ion_host_ptr1.ext_host_ptr.allocation_type = CL_MEM_IO ...
- 为了约会，PM的领导能力篇来啦！
之前我们花了很大力气阐述PM的过程能力成熟度,为的是让PM把项目管理得心应手,早点下班.可再完美的过程也要人来做啊!兄弟们要是不爽了,你还有心思约会么?那怎么才能管好组里的兄弟,让他们好好执行过程,早 ...
- promise原理
简介 Promise 对象用于延迟(deferred) 计算和异步(asynchronous )计算.一个Promise对象代表着一个还未完成,但预期将来会完成的操作.Promise 对象是一个返 ...