可拖拽彈出框

效果

父元件

v-if

="showdrag"
@close
="closedrag"
>
class
="canvas"
>
v-if
="onshow"
>
drawingboard
>
v-else
>
showingboard
>
class
="btn"
@click
="changestatus"
>
切換狀態button
>
div>
drag-window
>
子元件
class
="drag"
>
"lucky"
@mousedown
="down"
@touchstart
="down"
@mousemove
="move"
@touchmove
="move"
@mouseup
="end"
@touchend
="end"
@click
="click"
>
@click
="onclose"
style
="float
: right
">
關閉a-button
>
class
="content"
>
>
slot
>
div>
div>
div>

default

, nx:'',

ny:'',

dx:'',

dy:'',

xpum:'',

ypum:'',

}}, methods:

,// 實現移動端拖拽

down()

else

this

.position.x = touch.clientx;

this

.position.y = touch.clienty;

this

.dx = movediv.offsetleft;

this

.dy = movediv.offsettop;},

move()

else

this

.nx = touch.clientx -

this

.position.x;

this

.ny = touch.clienty -

this

.position.y;

this

.xpum =

this

.dx+

this

.nx;

this

.ypum =

this

.dy+

this

.ny;

movediv.style.left =

this

.xpum+

"px"

; movediv.style.top =

this

.ypum +

"px"

;//阻止頁面的滑動預設事件；如果碰到滑動問題，1.2 請注意是否獲取到 touchmove

event.

preventdefault()

;}},

//滑鼠釋放時候的函式

end(),

click()

}}<

/script>

js實現彈出框的拖拽

html部分 彈出框確定 取消 css部分 wrap popupbox layer head layer head text layer close layer body layer footer layer footer button group layer footer button layer...

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

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

高階拖拽（帶框拖拽）

右邊判斷div的left 瀏覽器的可視區clientwidth div的寬度,表示物體被拖出右邊 else if l document.documentelement.clientwidth div1.offsetwidth else if t document.documentelement.cl...