//最近项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现。
.directive('draggable', ['$document', function($document) {
return function(scope, element, attr) {
var startX = , startY = , x = , y = ;
element= angular.element(document.getElementsByClassName("modal-dialog"));
element.css({
position: 'relative',
cursor: 'move'
}); element.on('mousedown', function(event) {
// Prevent default dragging of selected content
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);
}
};
}]);
如图:已不在屏幕*,为拖动后的效果
angularjs modal模态框----创建可拖动的指令的更多相关文章
-
轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <se ...
-
angularjs 简易模态框
angularjs 简易模态框 angularjs 中的模态框一般使用插件angular-ui-bootstrap书写. 这里记录一种简易的模态框写法: 1.警告消息框alert: 原理: 在html ...
-
【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
-
重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,* 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
-
angular $modal模态框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
angularJs解决模态框下echarts不显示问题
例如:摸态框myModal.html,给它命名一个id,id='myModal'; myModal.html页面想画一个echarts图表 这里是angularJs已经封装好的echarts在html ...
-
修改bootstrap modal模态框的宽度
原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...
-
关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
-
Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
随机推荐
-
etcd:用于服务发现的键值存储系统
etcd是一个高可用的键值存储系统,主要用于共享配置和服务发现.etcd是由CoreOS开发并维护的,灵感来自于 ZooKeeper 和 Doozer,它使用Go语言编写,并通过Raft一致性算法处理 ...
-
[安卓] 3、EditText使用小程序
这里比较简单,看下面代码就能知道了:在按钮的点击事件时用String str = et.getText().toString();获取文本内容. public class MainActivity e ...
-
分析system_call中断处理过程
分析system_call中断处理过程 上周我们使用gcc内嵌汇编调用系统调用,这次我们具体分析下过程. 将getpid嵌入menuos 代码从github下载,步骤如下: 1. 增加一个函数,get ...
-
Cocos2dx实现象棋之布局
开始界面 #ifndef SCENESTART_H #define SCENESTART_H #include "cocos2d.h" #include "SceneGa ...
-
手机app常见bug积累
经过一年的测试工作,以下是手机APP比较容易出现的错误.之后如果发现了还会继续添加,修改.1.翻页手机客户端,内容超过一页时,上拉加载更多内容,加载错误(容易出现数据重复,图片和文章不匹配,图片重复加 ...
-
Oracle数据库之PL/SQL包
Oracle数据库之PL/SQL包 1. 简介 包(PACKAGE)是一种数据对象,它是一组相关过程.函数.变量.常量和游标等PL/SQL程序设计元素的组合,作为一个完整的单元存储在数据库中,用名称来 ...
-
sqlserver2008行锁
select * from tablename WITH (UPDLOCK) where Id=#value#
-
spring cloud 组件图
spring cloud 提供了一套微服务的框架. 上图就是微服务一些常用的组件. 1.EureKa 实现服务的注册和发现. 2.Ribbon 实现服务的调用(客户端实现负载均衡) 3.Feign 实 ...
-
LeetCode[Array]----3Sum
3Sum Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find a ...
-
洛谷P3959 [NOIP2017]宝藏
[题目描述] 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋,也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋中的宝藏.但 ...