angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(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)指令,以下即為該指令,親測(cè)可以實(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); } }; }]);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
- JS+CSS實(shí)現(xiàn)可拖動(dòng)的彈出提示框
- 原生js實(shí)現(xiàn)可拖動(dòng)的登錄框效果
- JS實(shí)現(xiàn)拖動(dòng)模糊框特效
- js實(shí)現(xiàn)簡(jiǎn)單模態(tài)框?qū)嵗?/a>
- AngularJs 彈出模態(tài)框(model)
- JS實(shí)現(xiàn)圖片點(diǎn)擊后出現(xiàn)模態(tài)框效果
- Vue.js彈出模態(tài)框組件開發(fā)的示例代碼
- 原生js實(shí)現(xiàn)簡(jiǎn)單的模態(tài)框示例
- js實(shí)現(xiàn)類bootstrap模態(tài)框動(dòng)畫
- JavaScript實(shí)現(xiàn)可拖動(dòng)模態(tài)框
相關(guān)文章
AngularJs定制樣式插入到ueditor中的問(wèn)題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問(wèn)題小結(jié)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08AngularJS基礎(chǔ) ng-value 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-value 指令,這里對(duì)ng-value 的基礎(chǔ)資料做了整理,并附實(shí)例代碼,有需要的小伙伴可以參考下2016-08-08利用Angular.js限制textarea輸入的字?jǐn)?shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識(shí)后,就可以開始創(chuàng)建第一個(gè)AngularJS應(yīng)用程序,這篇文章通過(guò)示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù),有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-10-10angular組件間通訊的實(shí)現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于angular組件間通訊的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用angular組件具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令實(shí)現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05AngularJs篇:使用AngularJs打造一個(gè)簡(jiǎn)易權(quán)限系統(tǒng)的實(shí)現(xiàn)代碼
本篇文章主要介紹了AngularJs篇:使用AngularJs打造一個(gè)簡(jiǎn)易權(quán)限系統(tǒng)的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12AngularJS對(duì)動(dòng)態(tài)增加的DOM實(shí)現(xiàn)ng-keyup事件示例
這篇文章主要介紹了AngularJS對(duì)動(dòng)態(tài)增加的DOM實(shí)現(xiàn)ng-keyup事件示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03angular route中使用resolve在uglify壓縮后問(wèn)題解決
這篇文章主要介紹了angular route中使用resolve在uglify壓縮后問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2016-09-09