使用angular帮你实现拖拽
拖拽有多种写法，在这里就看一看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 2.0 文本拖拽
基于Angular7.1和TypeScript实现 Html代码 <div style="padding-left: 0px;"> <div id='conten ...
- angular ng-repeat+sortable 拖拽demo
由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...
- Angular 自定义拖拽指令
指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...
- angular实现draggable拖拽
前言:最近项目要实现一个拖拽功能,我在网上开始了各类搜寻,虽然后面因为数据原因舍弃了拖拽的这一需求,但是为了不辜负最近的研究,还是来记录一下. 场景需求:面试预约选时间节点,候选人之间是可以相互交换的 ...
- Angular 元素拖拽
拖动元素到指定区域 拖放的同时传递数据 1. 安装 ng2-drag-drop npm install ng2-drag-drop --save 2. 模板中配置可拖拽元素 // drag.compo ...
- Android 自动化测试—robotium(八) 拖拽
本文来源于:http://xiaomaozi.blog.51cto.com/925779/933056 SeekBar控件 代码实现:http://luwenjie.blog.51cto.com/92 ...
- Qt之QAbstractItemView视图项拖拽(一)
一.需求说明 最近在搞视图项的拖拽,也上网查了一些资料,好多的文档都是一样的,只是被不通的网站所收录了(也有可能是被爬过去的,不明所以),不过也有一些文档写的不错,不过就是太简易,都是点睛之笔,总之功 ...
- duilib中控件拖拽功能的实现方法（附源码）
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...
- Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
随机推荐
- postgress数据库 出现大写字母 字段名但是提示说不存在
select BSK001 from dbdata 报错: column "bsk001" of relation "dbdata" does not exis ...
- [DEBUG]-[org.mybatis.spring.SqlSessionFactoryBean.buildSqlSessionFactory(SqlSessionFactoryBean.java:431)] 一直在创建sqlsession工厂原因
今天在做开发项目的时候出现一直在控台输出创建sqlsessionfactory'这个代码, tomcat一直在控制台上输出这个内容无法停止下来,那么到底是什么原因呢, 我们可以在输出信息上看到有个wa ...
- php中magic_quotes_gpc的作用 解决日文数据提交后多出来反斜杠的问题
magic_quotes_gpc发生作用是在传递$_GET,$_POST,$_COOKIE时 1.条件: magic_quotes_gpc=off写入数据库的字符串未经过任何过滤处理.从数据库读出的字 ...
- Android 数据库框架GreenDao使用
1.GreenDao3介绍 (1)基本概念 (2)GreenDao3工作原理 (3)GreenDao优点 (4)GreenDao3版本的改进 2.GreenDao3的相关配置概念介绍 (1)配置项目( ...
- Django ORM常用字段和参数
常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. IntegerField 一个整数类型,范围 ...
- 【研究】Struts2-048漏洞
1.1 漏洞背景 2017年7月7日,Apache Struts发布最新的安全公告,Apache Struts2-strus1-plugin插件存在远程代码执行的高危漏洞,漏洞编号为CVE-2017- ...
- PIE SDK地图范围设置和图层事件监听
1. 功能简介 地图范围设置的监听就是通过IMapControlEvents接口对地图的视图范围更新或者地图的分辨率发生变化进行监听,然后做出相应的操作. 图层事件的监听就是通过IActiveView ...
- Promise个人笔记---【Promise的前世今生】
Promise第一版本 案例是使用Node.js内置的fs模块[就是文件系统模块,负责读写文件.]来模拟异步操作 const fs = require('fs'); function getFileP ...
- 如何透过上层div点击下层的元素解决方法
一.问题描述 笔者是在些一个登录界面时遇到这个问题的,需求是点击登录按钮出现登录悬浮框,初始化时登录悬浮框是display:none的,但笔者发现登录框那一块区域的input框无法响应点击时间,也无法 ...
- (转)浅谈千万级PV/IP规模高性能高并发网站架构
浅谈千万级PV/IP规模高性能高并发网站架构 原文:http://blog.51cto.com/oldboy/736710 文章架构简图: 高并发访问的核心原则其实就一句话“把所有的用户访问请求都 ...