快捷導(dǎo)航

angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果

更新時(shí)間：2020年08月25日 08:52:36 作者：garsonguo

這篇文章主要為大家詳細(xì)介紹了angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果的相關(guān)資料，angularjs modal模態(tài)框創(chuàng)建可拖動(dòng)的指令，感興趣的小伙伴們可以參考一下

本文實(shí)例介紹了angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果的相關(guān)代碼，項(xiàng)目中需要將angular-ui-bootstrap中用到的彈出框，使之可拖動(dòng)，分享給大家供大家參考，具體內(nèi)容如下

運(yùn)行效果圖：

由于源文件中沒有實(shí)現(xiàn)，需要自己實(shí)現(xiàn)指令，以下即為該指令，親測可以實(shí)現(xiàn)。

.directive('draggable', ['$document', function($document) {
    return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;
    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);
    }
    };
 }]);

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS 簡單應(yīng)用實(shí)例
本文主要介紹AngularJS 的簡單應(yīng)用實(shí)例,這里對(duì)AngularJS的知識(shí)總結(jié),并提供實(shí)例代碼和應(yīng)用程序講解,有需要的小伙伴可以參考下
2016-07-07
詳解AngularJS中的http攔截
這篇文章主要為大家詳細(xì)介紹了AngularJS中的http攔截，$http服務(wù)允許我們與服務(wù)端交互，有時(shí)候我們希望在發(fā)出請(qǐng)求之前以及收到響應(yīng)之后做些事情。即http攔截,需要的朋友可以參考下
2016-02-02
AngularJS實(shí)現(xiàn)用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
這篇文章主要介紹了AngularJS實(shí)現(xiàn)用戶登錄狀態(tài)判斷的方法,通過Model添加攔截過濾器,路由增加限制實(shí)現(xiàn)針對(duì)登陸狀態(tài)的判斷功能,需要的朋友可以參考下
2016-12-12
angularJS1 url中攜帶參數(shù)的獲取方法
今天小編就為大家分享一篇angularJS1 url中攜帶參數(shù)的獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Angular2使用Augury來調(diào)試Angular2程序
這篇文章主要介紹了Angular2使用Augury來調(diào)試Angular2程序,非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
詳解Angular開發(fā)中的登陸與身份驗(yàn)證
Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,Angular 經(jīng)常會(huì)被用到后臺(tái)和管理工具的開發(fā)，這兩類都會(huì)需要對(duì)用戶進(jìn)行鑒權(quán)。而鑒權(quán)的第一步，就是進(jìn)行身份驗(yàn)證。本文詳細(xì)介紹了Angular開發(fā)中的登陸與身份驗(yàn)證。
2016-07-07
AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能,涉及AngularJS事件響應(yīng)實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能的相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
Angular-Ui-Router+ocLazyLoad動(dòng)態(tài)加載腳本示例
本篇文章主要介紹了Angular-Ui-Router+ocLazyLoad動(dòng)態(tài)加載腳本示例，可以提高加載速度，使用戶體驗(yàn)更好，有興趣的可以了解一下。
2017-03-03
AngularJS service之select下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了AngularJS service之select下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
Angular中的$watch、$watchGroup、$watchCollection
這篇文章主要介紹了Angular中的$watch、$watchGroup、$watchCollection ,需要的朋友可以參考下
2017-06-06