angularjs modal模态框----创建可拖动的指令

时间:2021-02-10 14:17:23
//最近项目中需要将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模态框----创建可拖动的指令

angularjs modal模态框----创建可拖动的指令的更多相关文章

  1. 轻量级Modal模态框插件cta.js

    今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <se ...

  2. angularjs 简易模态框

    angularjs 简易模态框 angularjs 中的模态框一般使用插件angular-ui-bootstrap书写. 这里记录一种简易的模态框写法: 1.警告消息框alert: 原理: 在html ...

  3. 【bootstrap】modal模态框的几种打开方法&plus;问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  4. 重置 Bootstrap modal 模态框数据

    利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,* 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...

  5. angular &dollar;modal模态框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. angularJs解决模态框下echarts不显示问题

    例如:摸态框myModal.html,给它命名一个id,id='myModal'; myModal.html页面想画一个echarts图表 这里是angularJs已经封装好的echarts在html ...

  7. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  8. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  9. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

随机推荐

  1. etcd:用于服务发现的键值存储系统

    etcd是一个高可用的键值存储系统,主要用于共享配置和服务发现.etcd是由CoreOS开发并维护的,灵感来自于 ZooKeeper 和 Doozer,它使用Go语言编写,并通过Raft一致性算法处理 ...

  2. &lbrack;安卓&rsqb; 3、EditText使用小程序

    这里比较简单,看下面代码就能知道了:在按钮的点击事件时用String str = et.getText().toString();获取文本内容. public class MainActivity e ...

  3. 分析system&lowbar;call中断处理过程

    分析system_call中断处理过程 上周我们使用gcc内嵌汇编调用系统调用,这次我们具体分析下过程. 将getpid嵌入menuos 代码从github下载,步骤如下: 1. 增加一个函数,get ...

  4. Cocos2dx实现象棋之布局

    开始界面 #ifndef SCENESTART_H #define SCENESTART_H #include "cocos2d.h" #include "SceneGa ...

  5. 手机app常见bug积累

    经过一年的测试工作,以下是手机APP比较容易出现的错误.之后如果发现了还会继续添加,修改.1.翻页手机客户端,内容超过一页时,上拉加载更多内容,加载错误(容易出现数据重复,图片和文章不匹配,图片重复加 ...

  6. Oracle数据库之PL&sol;SQL包

    Oracle数据库之PL/SQL包 1. 简介 包(PACKAGE)是一种数据对象,它是一组相关过程.函数.变量.常量和游标等PL/SQL程序设计元素的组合,作为一个完整的单元存储在数据库中,用名称来 ...

  7. sqlserver2008行锁

    select * from tablename WITH (UPDLOCK) where Id=#value#

  8. spring cloud 组件图

    spring cloud 提供了一套微服务的框架. 上图就是微服务一些常用的组件. 1.EureKa 实现服务的注册和发现. 2.Ribbon 实现服务的调用(客户端实现负载均衡) 3.Feign 实 ...

  9. LeetCode&lbrack;Array&rsqb;----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 ...

  10. 洛谷P3959 &lbrack;NOIP2017&rsqb;宝藏

    [题目描述] 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋,也给出了这 n 个宝藏屋之间可供开发的 m 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋中的宝藏.但 ...