angularjs創(chuàng)建彈出框實現拖動效果
更新時間：2020年08月25日 08:52:36 作者：garsonguo
這篇文章主要為大家詳細介紹了angularjs創(chuàng)建彈出框實現拖動效果的相關資料，angularjs modal模態(tài)框創(chuàng)建可拖動的指令，感興趣的小伙伴們可以參考一下
本文實例介紹了angularjs創(chuàng)建彈出框實現拖動效果的相關代碼，項目中需要將angular-ui-bootstrap中用到的彈出框，使之可拖動，分享給大家供大家參考，具體內容如下
運行效果圖：
由于源文件中沒有實現，需要自己實現指令，以下即為該指令，親測可以實現。
.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);
}
};
}]);
以上就是本文的全部內容，希望對大家的學習有所幫助。
相關文章
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
本文主要介紹AngularJS ng-value 指令,這里對ng-value 的基礎資料做了整理，并附實例代碼，有需要的小伙伴可以參考下2016-08-08
相信在大家已經學習了足夠多關于AngularJS的知識后，就可以開始創(chuàng)建第一個AngularJS應用程序，這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字數，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
這篇文章主要給大家介紹了關于angular組件間通訊的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angular組件具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-05-05
這篇文章主要介紹了AngularJS自定義指令之復制指令實現方法,結合完整實例形式分析了AngularJS自定義指令實現復制功能的相關操作技巧,需要的朋友可以參考下2017-05-05
AngularJs篇：使用AngularJs打造一個簡易權限系統的實現代碼
本篇文章主要介紹了AngularJs篇：使用AngularJs打造一個簡易權限系統的實現代碼，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
下面小編就為大家?guī)硪黄狝ngular2環(huán)境搭建具體操作步驟(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本篇文章主要介紹了詳解Angular2組件之間如何通信，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
AngularJS對動態(tài)增加的DOM實現ng-keyup事件示例
這篇文章主要介紹了AngularJS對動態(tài)增加的DOM實現ng-keyup事件示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
angular route中使用resolve在uglify壓縮后問題解決
這篇文章主要介紹了angular route中使用resolve在uglify壓縮后問題解決的相關資料,需要的朋友可以參考下2016-09-09