DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot ASP.NET Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot ASP.NET Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot ASP.NET Scheduler
DayPilot » Knowledge Base » How to make the modal dialog draggable

How to make the modal dialog draggable

Last revision: Jan 24, 2013

The modal dialog (see How to show event details in a modal dialog (modal.js) and How to show a modal dialog in ASP.NET MVC 3 Razor) can be dragged using its border:

modal dialog drag drop

On pressing the mouse button, the dialog box content will be disabled and you can move it to a new location by dragging:

modal dialog drag drop moving

The modal dialog window can be made draggable using dragDrop property:

modal.dragDrop = true;

By default, it is turned on.


function dialog() {
  var modal = new DayPilot.Modal();
  modal.dragDrop = true; = 60;
  modal.width = 300;
  modal.opacity = 70;
  modal.border = "10px solid #d0d0d0";
  modal.height = 250;
  modal.zIndex = 100;
  modal.closed = function() { 
    if(this.result == "OK") { 
  return modal;

function eventClick(e) {
  var modal = dialog();
  modal.showUrl("Edit.aspx?id=" + e.value());


How to open a new event dialog using TimeRangeSelected event (modal.js)
How to force the modal dialog to load its content from the server (instead of the cached version)
How to open an event edit dialog from a context menu (Calendar)
How to show event details in a modal dialog (modal.js)