test/BootstrapBlazor3
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2024-12-06 22:19:48 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

!3541 feat(#I61RYS): support draggable for multiple pop-up dialogs

Browse Source 
* feat: 多级弹窗支持拖动功能
* fix: 更新 Modal 脚本多弹窗支持可拖动
This commit is contained in:
Argo 2022-11-18 03:10:32 +00:00
parent f14194f90b
commit 2a1764a328
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/BootstrapBlazor.Shared/Components/DialogDemo.razor.cs
View File

@ -18,6 +18,7 @@ public partial class DialogDemo
private Task OnClickButton() => DialogService.Show(new DialogOption()
{
Title = "Pop-up",
IsDraggable = true,
Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
});
}

23
src/BootstrapBlazor/wwwroot/modules/modal.js
View File

@ -74,14 +74,16 @@ export class Modal extends BlazorComponent {
this._dialog = dialogs[dialogs.length - 1]
this._draggable = this._dialog.classList.contains('is-draggable')
if (this._draggable) {
this._disposeDrag()
this._originX = 0;
this._originY = 0;
this._dialogWidth = 0;
this._dialogHeight = 0;
this._pt = {top: 0, left: 0};
const header = this._dialog.querySelector('.modal-header')
drag(header,
this._header = this._dialog.querySelector('.modal-header')
drag(this._header,
e => {
this._originX = e.clientX || e.touches[0].clientX;
this._originY = e.clientY || e.touches[0].clientY;
@ -95,8 +97,8 @@ export class Modal extends BlazorComponent {
this._dialog.style.marginLeft = `${this._pt.left}px`
this._dialog.style.marginTop = `${this._pt.top}px`
this._dialog.style.marginBottom = `0`
this._dialog.style.marginRight = `0`
this._dialog.style.marginBottom = '0'
this._dialog.style.marginRight = '0'
this._dialog.style.width = `${this._dialogWidth}px`
this._dialog.classList.add('is-drag')
@ -143,9 +145,22 @@ export class Modal extends BlazorComponent {
}
}
_disposeDrag() {
if (this._header) {
EventHandler.off(this._header, 'mousedown')
EventHandler.off(this._header, 'touchstart')
this._header = null
}
}
_dispose() {
if(this._draggable) {
this._disposeDrag()
}
EventHandler.off(this._element, 'shown.bs.modal')
EventHandler.off(this._element, 'hide.bs.modal')
EventHandler.off(window, 'popstate', this._pop)
if (this._modal) {
this._modal.dispose()