//最近项目中需要将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模态框----创建可拖动的指令的更多相关文章

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

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

  2. angularjs 简易模态框

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

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

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

  4. 重置 Bootstrap modal 模态框数据

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

  5. angular $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. OS X Lion版 如果我忘记了我的账户密码 我该怎么办?

    来到了 mac os x lion 10.7 上. 忘记密码的朋友不会减少. 除了努力回忆和询问自己的老婆外还有其他办发不? 那是自然有的. 帐户密码很重要虽然有时候我们设置了帐户自动登陆但是如果您需 ...

  2. c++ new带括号和不带括号

    在new对象的时候有加上(),有不加(),不知道这个到底是什么区别?比如:CBase *base = new CDerived();CBase *base = new CDeviced; 很多人都说, ...

  3. 【转】模块编译Android源码方法

    原文网址:http://blog.csdn.net/androidlover1991/article/details/17014055 实际开发中,并不需要每次都编译所有源代码,只需要编译自己修改的模 ...

  4. C#验证码

    using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; us ...

  5. Delphi 6 Web Services初步评估之三(转)

    Delphi 6 Web Services初步评估之三(转)   Delphi 6 Web Services初步评估之三(转)★ 测试总体印象:在整个测试中,对Delphi 6创建的Web Servi ...

  6. Json 的日期格式转换成DateTime

    JSON 的日期形式:”/Date(1242357713797+0800)/” , 下面我们就用以下C#的方法将他转换成DateTime类型: /// <summary> /// Json ...

  7. Axure初体验:简单交互、通过按钮切换图片

    前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

  8. hdu 4411 arrest 最小费用流

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...

  9. winform 导出TXT 分类: WinForm 2014-05-15 15:29 128人阅读 评论(0) 收藏

    截图: 代码实现:(导出txt按钮事件) using System.IO; using System.Data.OleDb; private void btnOutTxt_Click(object s ...

  10. IAP内购 返回的产品数量为0

    上个月搞IAP,提交到appstore审核被拒,根据附件截图 可以知道是请求产品信息的时候,产品数量返回0了. 返回产品数量为0 要么是Itunes Connect 里面的Contracts Tax ...