使用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下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
随机推荐
- P2252 取石子游戏 威佐夫博弈
$ \color{#0066ff}{ 题目描述 }$ 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆 ...
- 控制台解析命行C#
//--------------------------------------------------------------------- /// <summary> /// Co ...
- js innerText、textContent、innerHTML的区别和各自用法
//自定义函数 function my$(id) { return document.getElementById(id); } //点击按钮设置div中的文本内容 my$("btn&quo ...
- 【Leedcode】Insertion Sort List
Sort a linked list using insertion sort. /** * Definition for singly-linked list. * struct ListNode ...
- php Apache No input file
RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 变为 RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
- PHP 备份还原 MySql 数据库
原生 PHP 备份还原 MySql 数据库 支持 MySql,PDO 两种方式备份还原 php5.5 以上的版本建议开启pdo扩展,使用 pdo 备份还原数据 备份文件夹 db_backup.impo ...
- Jupyter 安装与应用
用pip安装Jupyter pip install jupyter 从命令行启动笔记本服务器 jupyter notebook 前提要先启动python,这里有一个 token值,如果不是使用默认浏览 ...
- POJ3322 Bloxorz I 无脑广搜（我死了。。。）
多测不清空,爆零两行泪....我死了QWQ 每个节点3个状态:横坐标,纵坐标,和方向 说一下方向:0:立着,1:竖着躺着,上半部分在(x,y),2:横着躺着,左半部分在(x,y) 然后就有了常量数组: ...
- SGU - 275 线性基 初步
题意:求给出的数任意异或的最大值 目前对线性基的理解过于肤浅,有空总结一下 #include<iostream> #include<algorithm> #include< ...
- 1093 字符串A+B （20 分）
给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出 A 和 B,均为长度不超过 106 ...