The predefined dialogs supports dragging within its target container by grabbing the dialog header, which allows the user to reposition the dialog dynamically by using isDraggable property.
<template>
<div class="predefinedDialogs">
<ejs-button id="alertDlgBtn" v-on:click.native="alertBtnClick" cssClass="e-danger">Alert</ejs-button>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
.predefinedDialogs {
height: 100%;
min-height: 350px;
}
</style>
<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
export default {
data: function () {
return {};
},
methods: {
alertBtnClick: function () {
DialogUtility.alert({
title: 'Low battery',
width: '250px',
isDraggable: true,
content: '10% of battery remaining',
});
}
},
}
</script><template>
<div class="predefinedDialogs">
<ejs-button id="confirmDlgBtn" v-on:click.native="confirmBtnClick" cssClass = "e-success">Confirm</ejs-button>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
.predefinedDialogs {
height: 100%;
min-height: 350px;
}
</style>
<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
export default {
data: function () {
return {};
},
methods: {
confirmBtnClick: function () {
DialogUtility.confirm({
title: 'Delete multiple items',
content: "Are you sure you want to permanently delete these items?",
width: '300px',
isDraggable:true
});
},
},
}
</script><template>
<div class="predefinedDialogs">
<ejs-button id="promptDlgBtn" v-on:click.native="promptBtnClick" :isPrimary="true">Prompt</ejs-button>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
.predefinedDialogs {
height: 100%;
min-height: 350px;
}
</style>
<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
export default {
data: function () {
return {};
},
methods: {
promptBtnClick: function () {
DialogUtility.confirm({
title: 'Join chat group',
width:'250px',
isDraggable:true,
content: '<p>Enter your name: </p><input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />'
});
},
},
}
</script>