js實現彈出框的拖拽

2022-03-25 13:28:40 字數 951 閱讀 8685

//html部分

彈出框確定

取消//css部分

.wrap

.popupbox

.layer-head

.layer-head-text

.layer-close

.layer-body

.layer-footer

.layer-footer-button-group

.layer-footer-button

.layer-sure

.layer-cancel

//點選某物體時,用drag物件即可,move和up是全域性區域,也就是整個文件通用,應該使用document物件而不是drag物件(否則,採用drag物件時物體只能往右方或下方移動)

$(document).on('mousedown', '.layer-head', function(e)

if ($(e.target).hasclass('layer-close'))

var diffx = e.clientx - drag.offset().left; //滑鼠點選物體那一刻相對於物體左側邊框的距離=點選時的位置相對於瀏覽器最左邊的距離-物體左邊框相對於瀏覽器最左邊的距離

var diffy = e.clienty - drag.offset().top;

$(document).on('mousemove', function(e) else if (left > window.innerwidth - drag.width())

if (top < 0) else if (top > window.innerheight - drag.height())

//移動時重新得到物體的距離,解決拖動時出現晃動的現象

drag.css();

});$(document).on('mouseup', function(e) );

});

可拖拽彈出框

效果 父元件 v if showdrag close closedrag class canvas v if onshow drawingboard v else showingboard class btn click changestatus 切換狀態button div drag window...

關閉彈框事件 簡單的彈出框拖拽關閉事件

彈出框拖拽關閉事件 margin 0 padding 0 box width 500px height 250px background f2f2f2 border 1px ccc solid border radius 3px position absolute left calc 50 250p...

js彈出提問框訊息框警告框

警告 alert 在訪問 的時候,你遇到過這樣的情況嗎?咚 的一聲,乙個小視窗出現在你面前,上面寫著一段警示性的文字,或是其它的提示資訊。如果你不點選確定,你就不能對網頁做任何的操作。沒錯,這個 咚 的小視窗就是alert幹的。下面的 是一段使用alert的例項。我的個人觀點是盡量少使用alert,...