DayPilot » Knowledge Base » How to make the modal dialog draggable

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:

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

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

modal.dragDrop = true;

By default, it is turned on.

Example

function dialog() {
  var modal = new DayPilot.Modal();
  modal.dragDrop = true;
  modal.top = 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") { 
      dps1.commandCallBack('refresh'); 
    }
    dps1.clearSelection();
  };
  return modal;
}

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