使用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下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
随机推荐
- 谈谈easyui datagrid 的数据加载
文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...
- js自定义对象 (转)
原文地址:https://sjolzy.cn/js-custom-object.html 29 March 2010 9:53 Monday by 小屋 javascript进阶之对象篇 一,概述 在 ...
- Android TextUtils工具类的使用
1.采用File类,在指定目录下读写数据 java后台代码为: (1)向app的/data/data/com.example.lucky.helloworld目录下写入文本(涉及IO的读写操作) pa ...
- Celery 大量任务 分发
Celery是由Python开发的一个简单.灵活.可靠的处理大量任务的分发系统,它不仅支持实时处理也支持任务调度. user:用户程序,用于告知celery去执行一个任务. broker: 存放任务( ...
- 【字典树】【树】【二进制】bzoj1954/POJ3764The xor-longest Path 题解
建立字典树是异或的一种处理方法. Description In an edge-weighted tree, the xor-length of a path p is defined as ...
- BZOJ - 1458 / P4311 最大流应用 贪心
题意:给定n*m的图,每个士兵可以占领当前行和列,第i行至少要R[i]个士兵占领,第j列至少要C[j]个士兵占领,部分网格无法占领,求占领所用最少士兵数,若无解则输出orz 士兵的贡献情况有1(只有效 ...
- Tomcat启动分析
[转自] http://docs.huihoo.com/apache/tomcat/heavyz/01-startup.html 1 - Tomcat Server的组成部分 1.1 - Server ...
- drf之序列化器的使用
一.序列化器-Serializer 作用: 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 完成数据校验功能 3. 反序列化,把客户端发送过来的数据,经 ...
- Java 不可变对象
不可变对象(immutable objects):一旦对象被创建,它们的状态就不能被改变(包括基本数据类型的值不能改变,引用类型的变量不能指向其他的对象,引用类型指向的对象的状态也不能改变),每次对他 ...
- PIE SDK栅格生成等值线、面
1.算法功能简介 等值线图能直观地展示数据的变化趋势,是众多领域展示成果的重要图建之一,被广泛应用于石油勘探.矿物开采.气象预报等众多领域.等值线的绘制是指从大量采样数据中提取出具有相同值的点的信 ...